详解Vue 如何监听Array的变化

在Vue.js框架中，数据响应式是其核心特性之一，它允许开发者在数据变化时自动更新视图。在处理对象属性变化方面，Vue通过Object.defineProperty方法提供了良好的支持。然而，当涉及到数组时，Vue需要特别处理以监听变化，因为直接使用Object.defineProperty并不足以监听数组索引的添加、删除以及数组长度的变化。 ### Vue监听数组变化的方法 Vue通过重写数组原型上的一些方法来实现对数组变化的监听。Vue覆盖了以下七个Array原型方法： 1. push() 2. pop() 3. shift() 4. unshift() 5. splice() 6. sort() 7. reverse() 通过这种方式，当这些方法被调用时，Vue能够接收到通知，并执行相应的依赖收集或触发视图更新。 ### Vue响应式原理中的Observer、Dep、Watcher 在深入理解Vue如何监听数组变化之前，我们需要先了解Vue中的响应式系统是由三个部分组成的：Observer、Dep和Watcher。 - **Observer**：负责将数据对象的所有属性转换为getter/setter的形式，从而能监听到数据的变化。 - **Dep**：是一个依赖收集器，用来收集与数据相关联的Watcher，当数据变化时，通知所有相关联的Watcher进行更新。 - **Watcher**：观察者，当依赖的数据发生变化时，会触发其回调函数。 当一个Vue实例被创建时，它的数据对象会通过Observer进行遍历，将其属性转换为getter/setter的形式。如果属性是对象或数组，则会递归调用Observer将其子属性也转换为响应式。一旦数据被这样处理，Vue就可以检测到数据的任何变化，并触发依赖该数据的Watcher执行更新。 ### 数组的特殊处理 由于Object.defineProperty方法不能直接监听数组索引的添加或删除，Vue采取了特殊措施来处理数组的变化。 当检测到数据是数组时，Vue使用了覆盖Array原型的方法。具体来说，当Vue实例创建过程中，如果检测到数组对象，它会覆盖数组的原型上的七个方法。这样，当这些方法被调用时，实际上会触发Vue定义的特殊方法，从而间接实现对数组的响应式处理。 在覆盖方法时，Vue会进行如下操作： 1. 将原数组原型上的方法保存起来，以便之后调用。 2. 定义新的方法，这些方法在内部调用原始方法之前，会执行其他逻辑（如更新依赖、触发视图更新）。 3. 确保新的方法调用不会改变数组的原始行为。 ### 依赖收集与触发更新 对于数组的每个元素，Vue依然会使用Dep来管理依赖。在覆盖的方法执行时，Vue会通知相关的依赖进行更新。这意味着，当数组方法影响了数组本身（如改变长度）时，Vue能知道并且可以通知相应的Watcher去更新对应的视图。 由于数组的特殊性，Vue不支持索引的动态响应式添加或删除。例如，如果你有一个空数组，并直接通过索引赋值（如`array[1] = 'new item'`），Vue无法检测到这种变化。因此，对于数组索引的变化，Vue鼓励开发者使用覆盖的数组方法进行操作。 ### 总结 Vue通过特殊的数组处理方法，巧妙地解决了监听数组变化的难题。这种方法不仅保证了数组操作的正常行为，同时还能触发相关的依赖更新，保持视图的响应性。开发者在使用Vue处理数组时，应当尽量使用Vue支持的七种覆盖方法，以保证应用的响应式特性得以正确实现。