Vue3学习笔记—Vue3的Setup是如何实现响应式功能的？

setup用于编写组合api，需要返回内部数据和方法后才能使用模板。在之前的vue2中，data返回的数据可以直接用于双向绑定。如果我们在setup中直接双向绑定数据类型，发现变量不能实时响应。接下来我们看看setup是如何实现数据的响应式功能的？1、refsetup中的自定义属性不具备响应能力，所以引入了ref。ref底层使用代理将属性包装值包装到代理中。代理内部是一个对象，它可以使基本类型的数据具有响应性，必须在使用前引入。示例1：ref使用此时可以在设置模板中任意编辑心情，保证实时响应。例子中增加了value修改mood的值，因为ref原来的工作：letmood=ref("我此时心情不好！")改为：letmood=proxy({value:"我这段时间心情不好！"})二、reactive上面的ref让基本数据类型变成了responsive，但是如果我们换成引用类型数据，就会失效。所以引入了反应式。reactive通过底层封装将引用类型数据包装到代理中。使用原理如下：letme=reactive({single:true,want:"暖男如火炉"})//运行结果为letme=proxy:{single:true,want:"暖男谁温暖如火炉"}引用时直接用me.want即可。示例2：反应式使用通过设置+ref+reactive可以完全实现vue2中data的响应式功能，所以setup可以完全替代data。3.toRefs和toRef应用setup+ref+reactive实现数据响应式，不能使用ES6解构，会消除响应式特性。所以toRefs需要解构，使用的时候需要先引入。它的工作原理是：import{ref,reactive,toRefs}from"vue"letme=reactive({single:true,want:"暖炉一样的男人"})//runasletme=proxy:{single:true,want:"Amanaswarmasastove"}const{single,want}=toRefs(me)//单身运行:proxy({value:true})want:proxy({value:"warmmaninastove"})toRefs将single和want解构为两个代理，因此它是响应式的。示例3：toRefs解构数据toRef函数：返回对象的某个属性作为引用。比较难理解，可以打印查看结果，更容易理解。letme=reactive({single:true,want:"温暖如火炉"})letlv=toRef(me,'love')console.log('love',love);//打印结果ObjectRefImpl{__v_isRef:true_key:"love"_object:Proxy{single:true,want:"Amanaswarmasastove"}value:undefined[[Prototype]]:Object}toRef是组件之间传递的值，optional参数进行处理。运行的时候先检查我里面有没有love，如果有就继承我里面的love，如果不存在就创建一个love，然后解构赋值给变量lv。示例4：toRef使用4.总结ref使基本数据类型具有响应性，而reactive使引用类型的数据具有响应性。setup+ref+reactive完全实现了vue2中的数据响应功能。toRefs解构了reactive包裹的数据，toRef用于可选参数。