从复杂到简单，Vue2.0 数组双向绑定数据监听的实现过程

Vue2.0 中，数组双向绑定数据监听的实现过程大致可以分为以下几个步骤：

1. 数据获取时收集依赖

   当一个组件获取数据时，Vue2.0 会收集该组件对该数据的依赖关系。例如，当一个组件使用 v-model 指令绑定一个数组时，Vue2.0 会收集该组件对该数组的依赖关系。

2. 数组的通知依赖

   当一个数组发生变化时，Vue2.0 会通知所有依赖于该数组的组件。例如，当一个组件使用 v-model 指令绑定一个数组时，当该数组发生变化时，Vue2.0 会通知该组件，以便组件能够更新其状态。

3. 数据更新

   当一个组件收到数组变化的通知时，它会更新其状态。例如，当一个组件使用 v-model 指令绑定一个数组时，当该数组发生变化时，该组件会更新其状态，以便在界面上反映数组的变化。

何为何与 Object 对象监听方式不一样？

Vue2.0 中，数组双向绑定数据监听的实现方式与 Object 对象监听方式不一样，主要是因为数组是一个有序的数据结构，而 Object 对象是一个无序的数据结构。

对于数组来说，Vue2.0 可以通过重写数组的原型方法来实现数据监听。例如，Vue2.0 重写了 pop()、push()、shift()、unshift()、splice() 等方法，以便在这些方法被调用时触发数据更新。

而对于 Object 对象来说，Vue2.0 无法通过重写原型方法来实现数据监听。因为 Object 对象的属性是无序的，Vue2.0 无法确定哪些属性发生了变化。因此，Vue2.0 使用了一个名为 defineProperty() 的方法来实现 Object 对象的数据监听。

实现思路：数据获取时收集依赖，数据变化更新时通知更新

Vue2.0 中，数组双向绑定数据监听的实现思路是：当数据获取时收集依赖，当数据变化时通知更新。

• 数据获取时收集依赖

  当一个组件获取数据时，Vue2.0 会收集该组件对该数据的依赖关系。例如，当一个组件使用 v-model 指令绑定一个数组时，Vue2.0 会收集该组件对该数组的依赖关系。

• 数据变化更新时通知更新

  当一个数组发生变化时，Vue2.0 会通知所有依赖于该数组的组件。例如，当一个组件使用 v-model 指令绑定一个数组时，当该数组发生变化时，Vue2.0 会通知该组件，以便组件能够更新其状态。

总结

Vue2.0 中，数组双向绑定数据监听的实现过程是复杂而精妙的。通过对数据获取时收集依赖、数组的通知依赖、数据更新等步骤的深入了解，我们能够更好地理解 Vue2.0 的工作原理，并更好地应用它进行开发。