Vue3 响应式数据

什么是响应式数据

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

---

1.1：选项式API的响应式数据

---

1.2：组合式API的响应式数据

---

1.3：ref() 函数

具体的使用看 1.2 中的代码

• 使用 ref() 方法，我们可以创建任意类型的响应式数据，获取时的需要通过 .value 来获取
• 当值为对象类型的时候，会用 reactive() 自动转换它的 .value
• ref 接收一个内部值，并返回一个响应式的 ref 对象
  • 任意类型 => 返回一个 ref 对象
• 参数可以传递任意数据类型，传递对象类型时，也能保持深度响应式，所以适用性可以大，在 setup 中定义数据时，推荐优先使用 ref，方便拆分逻辑和业务解耦

---

1.4：reactive() 函数

具体的使用看 1.2 中的代码

• reactive() 函数只对，对象类型有效(对象，数组)，对 Number，String，Boolean 原始类型无效。
• reactive() 函数接收一个普通对象，然后返回该普通对象的响应式代理；
• 用 user.name = “new name” 来修改值
• 内部基于 proxy 来实现
• 获取数据值的时候可以直接获取，不需要加 .value
• 参数只能传入对象类型

---

1.5：toRef() 函数

具体的使用看 1.2 中的代码

• 用于为源响应式对象上的属性新建一个 ref，从而保持其源对象的响应式；
• 接收两个参数：1. 源对象 2. 属性名，返回一个 ref 数据
• 例如：使用父组件传递的 props 数据，某个属性要保持响应式时。
• Template(模板)中直接获取值，js 获取值，通过 .value 获取
• toRef 后，ref 数据不是原始数据的拷贝，而是引用。改变结果，原数据的值也会同时改变。
• 不会触发 UL 界面的更新

---

1.6：toRefs() 函数

具体的使用看 1.2 中的代码

• toRefs 用于将响应式对象转换为普通对象，但是其中的每个属性，都会指向原始对象的相应属性。就是依然保持响应式，常用于 es6 的解构赋值。因为在对一个响应式对象直接解构时，解构后的数据将不再有响应式，而使用 toRefs 可以解决这一个问题
• 获取数据值得时候需要加 .value
• toRefs 后的 ref 数据，不再是原始数据饿拷贝，而是引用。改变数据的值也会改变原始数据的值。
• 作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。

---

总结：

以上就是 vue3 响应式数据的原理和作用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog