vue是如何监听对象和数组变化的

Vue框架通过其响应式系统来监听对象和数组的变化。这个系统的核心在于追踪依赖关系，并在数据变化时通知所有依赖于该数据的观察者。

 

1. 对象监听

Vue使用`Object.defineProperty`方法来劫持各个属性的getter和setter。当组件中的数据被读取时，会触发getter函数，在getter函数内部进行依赖收集；当数据被修改时，setter函数会被触发，进而通知所有依赖于该属性的观察者进行更新。这种方式使得Vue可以精确地跟踪每个属性的变化，并进行高效的更新，还可以使用Object.assign()直接赋值来替换整个对象，可以触发视图更新。

2. 数组监听

由于JavaScript的原生数组方法（如`push`、`pop`、`splice`等）不会触发`Object.defineProperty`中的setter，Vue对数组的原生方法进行了重写，使其也可以触发视图更新。另外，Vue还提供了`Vue.set`方法或`Array.prototype.splice`来确保新增的元素也是响应式的。对于删除操作，Vue会通过索引跟踪依赖，确保删除操作能够被监听到。

3. 依赖收集

在组件渲染过程中，如果一个数据被读取，那么这个数据就会被添加到这个组件的依赖列表中。当数据发生变化时，Vue会遍历这个依赖列表，并通知所有依赖这个数据的部分进行更新。

4. Watcher

Vue的内部机制创建了Watcher对象，这些对象负责追踪自己依赖的数据，并在数据变化时执行回调函数以更新视图。每个组件实例都有一个Watcher实例与之对应，用于监听该组件模板所依赖的数据。

5. 异步队列

为了优化性能，Vue还会将这些更新放入一个异步队列，然后使用`nextTick`方法将这些更新在下一个DOM循环中一次性应用，这样可以减少不必要的DOM操作，提高渲染效率。

6. 虚拟DOM（VDOM）

Vue使用虚拟DOM来表示真实的DOM结构，当监听到数据变化时，Vue会生成新的虚拟节点与老的虚拟节点进行比较，然后通过一个diff算法计算出最小的变更步骤来更新真实的DOM。

 

总结来说，Vue通过定义属性的getter和setter以及重写数组方法来监听对象和数组的变化。当数据变化被监听到后，Vue通过内部的Watcher机制和虚拟DOM技术来确保视图能够高效且准确地更新。

---

在 Vue2 中，响应式原理**基于 Object.defineProperty** 实现，而在 Vue3 中，响应式原理是**通过 Proxy 对象实现的**。

Vue2 的响应式原理利用了 JavaScript 中的 `Object.defineProperty` 方法。此方法允许开发者定义对象属性的 getter 和 setter，使得当这些属性被读取或赋值时，可以执行自定义的操作。Vue2 在初始化过程中会遍历 data 对象的所有属性，为每个属性设置 getter 和 setter，同时收集依赖（即哪些地方使用了这个属性），并在属性值改变时通知这些依赖进行更新。

Vue3 则采用了 ES6 的 `Proxy` 对象来实现响应式。`Proxy` 可以代理对象的全部属性，并且能够轻松地对新增或删除的属性进行处理。与 `Object.defineProperty` 相比，它能够在更多操作（如数组索引的变更）上提供拦截能力。Vue3 结合了 `Reflect` 来确保 `Proxy` 处理中的一致性和正确性。

两者的主要区别在于：

1. **监听方式**：Vue2 使用的是属性级别的监听，而 Vue3 实现了对象级别的全局监听。
2. **新增和删除属性**：Vue2 对于对象新增或删除的属性无法做出响应式处理，除非使用特定的 API 方法；Vue3 由于使用了 Proxy，能够自然地处理这种情况。
3. **性能**：在 Vue2 中，由于需要递归遍历所有属性，在处理具有大量属性的对象时可能会有性能损耗。而 Vue3 通过 Proxy 避免了这种递归过程，提高了性能。