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
