vue2/vue3知识点

5.1.vue响应式原理

1.整体概述： Vue 的数据响应式原理是通过 Object.defineProperty()⽅法实现数据代理和订阅-发布者模式 来实现的。

2.数据代理（数据劫持）： 具体来说，当⼀个 Vue 实例被创建时，Vue 会对 data 中的每个属性使⽤ Object.defineProperty() ⽅法进⾏劫持，将其转换为访问器属性。 Object.defineProperty() ⽅法可以定义⼀个对象的属性，包括数据属性和访问器属性。在 Vue 中，我们使⽤了访问器属性，即 get 和 set ⽅法，来劫持数据的读取和修改。

3.订阅-发布者模式 当我们访问⼀个响应式数据时，Vue 会将当前的 Watcher 对象添加到该数据的订阅列表中。当数 据发⽣变化时，Vue 会通知订阅列表中的所有 Watcher 对象，从⽽触发视图的更新。

这种实现⽅式 可以看作是⼀种订阅发布者模式，其中响应式数据是发布者，Watcher 对象是订阅者。当响应式数据 发⽣变化时，会通知订阅列表中的所有 Watcher 对象，从⽽触发视图的更新。

在实现数据响应式的过程中，Vue 还使⽤了依赖收集的技术。依赖收集是指在访问响应式数据时，将 当前的 Watcher 对象添加到该数据的订阅列表中。当数据发⽣变化时，通知订阅列表中的所有 Watcher 对象，从⽽触发视图的更新。

依赖收集的实现是通过⼀个 Dep 类来实现的。每个响应式数据都有⼀个对应的 Dep 对象，⽤于存 储该数据的订阅列表。当⼀个 Watcher 对象被创建时，会将该 Watcher 对象添加到当前数据的 Dep 对象的订阅列表中。

在数据发⽣变化时，Vue 会通知该数据对应的 Dep 对象，从⽽触发订阅列表中的所有 Watcher 对象的更新。

这种实现⽅式使得 Vue 可以很好地实现数据的响应式和组件的更新。

4.vue数据响应式缺点： ⽆法监听数组下标的变化：Vue 的数据响应式机制只能监听到数组的 push、pop、shift、 unshift、splice 和 sort 等⽅法的调⽤，⽆法监听到数组下标的变化。

这意味着如果直接修改数 组下标的值，Vue ⽆法⾃动更新视图，需要⼿动调⽤ $forceUpdate ⽅法或者使⽤ Vue.set ⽅ 法来更新视图。

对象属性必须在初始化时声明：Vue 的数据响应式机制只能监听到已经声明的对象属性的变化，⽆法 监听到后续添加的属性。这意味着如果需要监听⼀个对象的所有属性变化，必须在初始化时声明所有属 性，或者使⽤ Vue.set ⽅法来添加属性。

对象属性的监听需要递归：Vue 的数据响应式机制只能监听到对象属性的⼀级变化，⽆法监听到深层 次的变化。

这意味着如果对象属性是⼀个嵌套的对象或者数组，需要递归地声明所有属性，或者使⽤ Vue.set ⽅法来添加属性。

对象属性的监听需要额外的内存开销：Vue 的数据响应式机制需要为每个对象属性都创建⼀个依赖 项，并且在属性变化时更新所有依赖项，这会导致额外的内存开销。如果需要监听⼤量的对象属性变 化，可能会导致性能问题。