欢迎光临
我的个人博客网站

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue3全家桶升级指南二ref、toRef、toRefs的区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏