reactive和toRefs一起使用

toRefs的作用是解构reactive对象

vue3.0定义对象

    let one=['1','2','3'];

    let data=reactive({ name="demo" });

1. ref(  ) 只能定义单个对象

2. reactive({  }) 可以以数组的形式群定义

3. ...toRefs( ) 可以直接页面声明，不需要如reactive方法一样需要data.name这样调用
   

reactive 相应对象

toRefs 普通对象

toRefs解构reactive数据，

...toRefs(data)

vue3.0中，控制台报警告就是报错

reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

使用ref定义基本数据类型,ref也可以定义数组和对象。

ref、toRef、toRefs

参数不同：ref()接收一个 js 基本数据类型的参数；toRef()接收两个参数，第一个为对象，第二个为对象中的某个属性；

原理不同：ref()是对原数据的一个深拷贝，当其值改变时不会影响到原始值；toRef()是对原数据的一个引用，当值改变时会影响到原始值；

响应性不同：ref()创建的数据会触发 vue 模版更新；toRef()创建的响应式数据并不会触发 vue 模版更新，所以toRef()的本质是引用，与原始数据有关联。

ref

reactive

torefs

通过reactive传入数据

定义数据时也需要引入，vue3.0 报错也是黄色，并非红色。

reactive，tiRefs结合使用，...torefs（）

reactive 定义对象取值(没有用toRefs)：data.name、data.age、

import {toRefs} from 'vue'

return { ...toRefs(data) }

reactive 定义对象取值(用toRefs)：name、age、