[JavaScript知识库]Vue3 toRef/toRefs解析与使用

这个API可以将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用?toRef()?创建的。

通俗的来说就是可以拆分对象,来进行原生js的解构赋值操作

const line_echarts = reactive({ // 实例化echarts图表 近三十天每天数据
  series2: [
    {
      data: [],
      type: 'line',
      smooth: true,
      // areaStyle: {},
    }, {
      data: [],
      type: "bar",
      smooth: true,
    }
  ],
  yAxiss: {
    type: 'value',
  },
  xAxiss: {
    type: 'category',
    data: [],
    axisLabel: {
      rotate: 25
    }
  },
  toolboxs: {
    show: false,
  },
  tooltipss: {
    show: true,    
    trigger: 'axis',   
  }
})
// !!!!!!!!! 解构赋值拆分原对象并推出 !!!!!!!!!!!!!
let { series2, yAxiss, xAxiss, toolboxs, tooltipss } = toRefs(line_echarts); 

注意!!!在vue中的对象解构赋值不同于js,按照js的方式解构赋值的确是进行了对象的拆分与赋值
但是结构出的变量仅仅作为变量,并不是作为vue可渲染的数据
这时候需要用到toRefs,此外还有toRef
toRefs()可以将一个响应式的对象，转换成普通对象。但是转换后的普通对象的每一个属性值都是响应式的
这样我们可以使用es6的对象解构或者三点运算符等操作
注意 解构赋值的变量名必须和对象的属性名一致

两者的区别:

toRefs?在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用?toRef。

而toRef与组件 props 结合使用时，关于禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props，这是不允许的。在这种场景下，你可能可以考虑使用带有?get?和?set?的?computed?替代。详情请见在组件上使用?v-model?指南。

即使源属性当前不存在，toRef()?也会返回一个可用的 ref。这让它在处理可选 props 的时候格外实用，相比之下?toRefs?就不会为可选 props 创建对应的 refs。