ref是原始数据的副本。当ref数据被修改时,模板中的视图会发生变化,但原始数据不会发生变化。toRef是对原始数据的引用。当toRef数据被修改时,原来的数据也会改变,但是view不会更新。在vue3中定义响应式数据的基本类型一般使用ref,定义响应式数据的引用类型一般使用reactive。import{ref,reactive}from"vue"exportdefault{setup(){letnum=ref(0)letobj=reactive({name:'张三',age:18})return{num,obj}}}这样在模板中使用时,可以直接通过{{num}}、{{obj.name}}、{{obj.age}}获取数据。基本类型的数据没有问题,但是在模板中写引用类型的值比较麻烦。我们也可以直接解构,在模板中直接使用{{name}}和{{age}}。import{ref,reactive}from"vue"exportdefault{setup(){letnum=ref(0)letobj=reactive({name:'张三',age:18})let{name,age}=objreturn{num,name,age}}}toRef将对象中的一个值转换为响应式数据toRef(obj,key)import{toRef}from"vue"exportdefault{setup(){letobj={name:'张三',年龄:18};让newObj=toRef(obj,'name');setTimeout(()=>{newObj.value='李四';console.log(obj,newObj);//obj中的name和newObj都变成了李四,但是view显示还是张三,不会变化},2000);返回{obj,newObj};},};toRef是对原始数据的引用,当toRef数据被修改时,原始数据也会改变,但视图不会更新。toRefs将整个对象转化为响应式数据toRefs(obj)import{toRefs}from"vue"exportdefault{letobj={name:'张三',age:18};让newObj=toRefs(obj);setTimeout(()=>{newObj.name.value='Lisi';console.log(obj,newObj);},2000);return{obj,newObj};}需要注意的是,按照上面的写法,在模板中使用时,需要按照{{newObj.name.value}}这个方法(不是很懂),如果你想直接使用{{name}}需要在setup中解构import{toRefswhenreturning}from"vue"exportdefault{letobj={name:'张三',age:18};让newObj=toRefs(obj);setTimeout(()=>{newObj.name.value='李四';console.log(obj,newObj);},2000);return{obj,...newObj};}这样可以直接通过模板中的{{name}}获取。总结一下1.ref是元数据的副本。修改响应式数据时,不会影响之前的数据,视图会更新。2.toRef和toRefs是对元数据的引用。修改响应式数据时,元数据也会改变,但视图不会更新。toRef修改对象的一个??属性,toRefs修改整个对象。然后你可以使用toRefs
