Vue 中简单说一下 Vue2.x 响应式数据原理？

在 Vue 2.x 中，响应式数据的实现依赖于 Object.defineProperty 方法，它通过劫持对象的属性来实现数据变化时通知视图更新的机制。

Vue 2.x 响应式数据原理：

1. 数据初始化： 在 Vue 实例化阶段，通过 Vue 的 data 选项中定义的数据对象。

2. 数据劫持： Vue 在初始化阶段会遍历 data 中的属性，使用 Object.defineProperty 方法对每个属性进行劫持（即对属性进行 getter 和 setter 的定义）。

3. getter 和 setter：

   • getter： 当访问数据属性时，getter 负责收集依赖。
   • setter： 当修改数据属性时，setter 负责触发依赖的更新。当数据发生变化时，会通知所有依赖这个属性的地方去更新视图。

4. 依赖收集： Vue 通过 Watcher 对象来进行依赖收集，当一个属性被访问（被读取）时，Watcher 会将当前组件实例与该属性关联起来。

5. 更新视图： 当数据发生变化时，setter 被调用，会通知 Watcher 执行更新，进而触发视图的重新渲染。

这种基于数据劫持的方式能够让 Vue 监听数据的变化，并且自动更新视图，实现了数据与视图的同步。这种响应式的特性让开发者无需手动操作 DOM，提高了开发效率和代码可维护性。