Vue3 之 reactive ref toRef toRefs

Vue3 之 reactive ref toRef toRefs

reactive

创建响应式的对象，只能传入对象，是创建一个该对象的Proxy，他就是原对象的一个响应式副本，不等于原始对象，它“深层”转换了源对象的所有嵌套 property，解包并维持其中的任何ref引用关系。
reactive API很好地解决了 Vue2 通过 defineProperty 实现数据响应式时的缺陷。

ref

就也是创建响应式对象，但是任何数据类型都可以作为参数，将参数包裹成一个具有value 属性 的对象返回，然后使用ref对象.value访问或者更改数据,----因为基础数据类型只能传递值而不是引用地址，将它包装在一个对象内，可以实现数据的响应式。

因为ref就是通过reactive包装了一个对象 ，然后将值传给该对象的value属性，这也就是为什么每次访问时我们都需要加上.value。可以简单地把 ref(obj) 理解为 reactive({ value: obj })。

如何选择 ref 和 reactive？建议：

1. 基础类型值(String、Number、Boolean等) 或单值对象(类似{ count: 3 }这样只有一个属性值的对象) 使用 ref
2. 引用类型值(Object、Array)使用 reactive
3. 对于 ref 对象可以使用 unref 语法糖来免去.value访问的困扰

toRef(原对象，对象的属性名)

传入对象的某一个属性创建一个响应式的ref, 它会保持对其源 property 的响应式连接。

得出结论：
ref 创建一个响应式对象，如果传入参数是对象，那么与对象所有嵌套属性都维持数据响应。它的作用是 data 选项 般的存在，即组件内部状态。ref值改变会触发页面渲染，同时能作为props或 事件参数 进行组件通信。
toRef 是对传入对象指定属性的响应式绑定，值改变不会更新视图。因此用它创建的变量不作用于模版渲染，而是用来接收诸如props的引用式传递。举例来说：通常就是我们在模板中只想要渲染出obj里面的一个属性，如果直接返回该值，那么就会失去响应式，因此使用toRef既能只抛出一个属性且保持响应式。

toRefs

使用toRef过程中，会发现，toRef只能代理一个对象属性。使用toRef可以代理这个对象下的所有属性。
了解完 toRef 后，就很好理解 toRefs 了，其作用是生成一个新对象，内部每个属性都指向传入的对象的相应 property 的响应式数据 ref。
也就是说，新对象本身与原对象的无关联(指向新的引用地址)，但它的所有属性却都与源对象的对应属性建立了响应性。
toRef 可以记成建立一个 ref 属性值的引用，toRefs 则是所有 ref 响应属性值的引用。

如果直接对响应式数据解构，那么数据就会失去响应性，所以就需要toRefs建立响应式关联，一般都是根据key进行解构

如果某个属性不存在，这种情况下toRefs不会为不存在的属性创建ref,此时就需要使用toRef

总结

• ref、reactive是在setup()声明组件内部状态用的， 这些变量通常都要 return 出去，除了供