目录
在vue3.0里给数据添加响应式有很多api可用,下面给大家简单说一下:
1.ref
ref : 为数据添加响应式状态，返回一个具有响应式状态的副本。
- 获取数据值的时候需要加.value。（对于基本数据类型，ref是自己的实现方式且性能优于reactive，而对于对象类型，ref可以理解为是通过reactive包装实现的）
- 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。
- vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。
2.reactive
reactive：为对象数据添加响应式状态，同样返回一个具有响应式状态的副本
- 获取数据值的时候直接获取，不需要加.value
- 参数只能传入对象类型
3.toRef
toRef ：将某个对象中的属性变成响应式数据, 修改通过toRef创建的响应式数据，会触发UI界面的更新。所以，toRef的本质是引用，与原始数据有关联
4.toRefs
toRefs： 和toRef的区别类似与reactive和ref,可以理解成批量包装 props 对象,用于将响应式对象转换为结果对象，它会遍历对象身上的所有属性，然后挨个调用toRef执行,其中结果对象的每个属性都是指向原始对象相应属性的ref:我们在使用reactive 的时候，在template模板里需要用对象店方法的形式绑定数据：
5.总结
ref初值到底写啥？null, [], 1, {} ....
1. 如果知道是列表数组，要做v-for的，就写 ref([])
2. 如果知道是对象。就写 ref(null),再通过axios拿值: xx.value = res.result
为啥不写 ref({})呢？
不是不行，而是在实操时 {} 不好判断！
3. 如果是基本数据类型（bool,string,number...）,根据业务来写
const isOpen = ref(false)
const name = ref('')
注意:尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱 在明确对象的内容的时候建议用reactive 比如登录页的表单 推荐使用ref和toRefs
