vue3学习笔记（五）vue3的setup如何实现响应式功能

　　setup是用来写组合式api，内部的数据和方法需要通过return之后，模板才能使用。在之前vue2中，data返回的数据，可以直接进行双向绑定使用，如果我们把setup中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能？一、ref
　　setup内的自定义属性不具备响应式能力，所以引入了ref，ref底层通过代理，把属性包装值包装成一个proxy，proxy内部是一个对象，使得基础类型的数据具备响应式能力，使用之前必须引入。
　　示例1：ref使用templateinputtypetextvmodelmood｛｛mood｝｝template
　　此时可以在setup模板内任意编辑mood，可以保证实时响应。实例在修改mood的值加了value，是因为ref的工作原来：
　　letmoodref（此时心情好差呀！）
　　修改成：letmoodproxy（｛value：此时心情好差呀！｝）二、reactive
　　上述的ref让基础数据类型具备了响应式，但是如果我们换成引用类型的数据，就会失效。所以引入了reactive。
　　reactive通过底层包装，将引用类型数据包装到proxy内，使用原理如：letmereactive（｛single：true，want：暖的像火炉的暖男｝）运行结果为letmeproxy：｛single：true，want：暖的像火炉的暖男｝
　　引用的时候，直接使用me。want就可以了。
　　示例2：reactive使用template｛｛me。want｝｝template
　　通过setuprefreactive就可以完全实现vue2中data的响应式功能，所以setup完全可以替换掉data。三、toRefs、toRef应用
　　setuprefreactive实现了数据响应式，不能使用ES6解构，会消除响应特性。所以需要toRefs解构，使用时，需要先引入。
　　它的工作原理为：import｛ref，reactive，toRefs｝fromvueletmereactive（｛single：true，want：暖的像火炉的暖男｝）运行为letmeproxy：｛single：true，want：暖的像火炉的暖男｝const｛single，want｝toRefs（me）运行为single：proxy（｛value：true｝）want：proxy（｛value：暖的像火炉的暖男｝）
　　toRefs把single和want解构成两个proxy，所以是响应式的。
　　示例3：toRefs解构数据template｛｛want｝｝inputtypetextvmodelwanttemplate
　　toRef作用：将对象某一个属性，作为引用返回。比较难理解，可以打印查看下结果更容易理解。letmereactive（｛single：true，want：暖的像火炉的暖男｝）letlvtoRef（me，love）console。log（love，love）；打印结果ObjectRefImpl｛visRef：truekey：loveobject：Proxy｛single：true，want：暖的像火炉的暖男｝value：undefined〔〔Prototype〕〕：Object｝
　　toRef是组件之间进行传值值，对可选参数进行处理，运行时，先查看me中是否存在love，如果存在时就继承me中的love，如果不存在时就创建一个love，然后解构赋值给变量lv。
　　示例4：toRef使用template｛｛want｝｝inputtypetextvmodelwanttemplate四、总结
　　ref让基础数据类型具备响应式，而reactive让引用类型的数据具备响应式。setuprefreactive完全实现vue2中data响应式功能。
　　toRefs解构reactive包装的数据，toRef用于对可选参数。