1、ref: 为数据添加响应式状态,返回一个具有响应式状态的副本。setup要通过'.value'属性来获取,template则会自动带入.value 比如:
const count = ref<number>(1);
console.log('count.value :>> ', count.value); // 1
由于reactive只能传入对象类型的参数,而对于基本数据类型要添加响应式状态就只能用ref了.同样返回一个具有响应式状态的副本。
2、reactive:为对象数据添加响应式状态,同样返回一个具有响应式状态的副本。
3、toRef :将某个对象中的属性变成响应式数据,,toRef的本质是引用,与原始数据有关联
*toRef的本质是引用关系,修改响应式数据会影响原始数据,toRef当数据发生改变是,界面不会自动更新
4、toRefs: 和toRef的区别类似与reactive和ref,可以理解成批量包装 props 对象,用于将响应式对象转换为结果对象,它会遍历对象身上的所有属性,然后挨个调用toRef执行,其中结果对象的每个属性都是指向原始对象相应属性的ref:
我们在使用reactive 的时候,在template模板里需要用对象店方法的形式绑定数据:
这样绑定就很麻烦乐,如果在return里面使用解构方式,比如 return {...a} 会发现没有办法做到响应式,但是可以使用toRefs:
(在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs可以方便解决这一问题)
发现一个更为全面的文章:
ref、reactive、toRef、toRefs的区别