Vue3全家桶升级指南二ref、toRef、toRefs的区别
ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变。
toref是对原始数据的引用,修改toref数据时,原始数据也会发生改变,但是视图并不会更新。
在vue3中定义一个基础类型的响应式数据一般使用ref,定义一个引用类型的响应式数据一般使用reactive。
import {ref,reactive} from "vue" export default { setup(){ let num=ref(0) let obj=reactive({name:'张三',age:18}) return {num,obj} } }
这样在模板中使用的时候,就可以直接通过{{num}},{{obj.name}},{{obj.age}}获取数据了。
基础类型的数据没有问题,但是引用类型的值在模板中这样写就比较累赘了,我们也可以直接解构出来,在模板中就可以直接使用{{name}}和{{age}}了。
import {ref,reactive} from "vue" export default { setup(){ let num=ref(0) let obj=reactive({name:'张三',age:18}) let {name,age}=obj return {num,name,age} } }
toref是将对象中的某个值转化为响应式数据 toref(obj,key)
import {toref} from "vue" export default { setup() { let obj = { name: '张三', age: 18 }; let newobj = toref(obj, 'name'); settimeout(() => { newobj.value = '李四'; console.log(obj, newobj); //obj中的name和newobj都变成李四了,但是视图显示还是张三,不会变化 }, 2000); return { obj, newobj }; }, }; </script>
toref是对原始数据的引用,修改toref数据时,原始数据也会发生改变,但是视图并不会更新。
torefs是将整个对象转化成响应式数据 torefs(obj)
import {torefs} from "vue" export default { let obj = { name: '张三', age: 18 }; let newobj = torefs(obj); settimeout(() => { newobj.name.value = '李四'; console.log(obj, newobj); }, 2000); return { obj, newobj }; }
需要注意的是,按照上面这种写法,在模板中使用的时候,需要按照这种方式 {{newobj.name.value}}(不太理解),如果想直接使用{{name}},那么在setup中return的时候需要解构下
import {torefs} from "vue" export default { let obj = { name: '张三', age: 18 }; let newobj = torefs(obj); settimeout(() => { newobj.name.value = '李四'; console.log(obj, newobj); }, 2000); return { obj, ...newobj }; }
这样在模板中就可以直接通过{{name}}来获取了。
小结一下
1、ref是对元数据的拷贝,修改响应式数据时不会影响之前的数据,视图会更新
2、toref和torefs是对元数据的引用,修改响应式数据时,元数据也会改变,但是视图不会更新,toref修改的是对象的某个属性,torefs修改的是整个对象
3、torefs的使用场景:如果想让响应式数据和原来的数据关联起来同步更新,并且不更新视图,那么就可以使用torefs
上一篇: 新零售业态冲击,同城货运或将转战B端
下一篇: Python全栈之协程详解