[vue] vue2.x 响应式原理是什么【热度: 669】

[yanlele]

关键词：vue响应式、Observe、Compile、Watcher

Vue.js 的响应式原理主要是通过数据劫持（Object.defineProperty()）实现。当我们在Vue实例中定义了一个 data 属性时，Vue 会对这个属性进行劫持，即在getter和setter时做一些操作。

具体实现流程如下：

1. 在Vue实例化时，Vue 会对 data 对象进行遍历，使用 Object.defineProperty() 方法将每个属性转换为 getter 和 setter。
2. 当数据发生变化时，setter 会被调用，并通知所有相关联的视图进行更新。
3. 当视图进行更新时，Vue 会对新旧 VNode 进行比对（diff）, 只对发生了变化的部分进行更新，从而提高效率。

这种数据劫持的方式能够让开发者以声明式的方式来编写代码，同时又能够监测到数据的变化，并及时地通知相关视图进行更新。

Vue 的响应式原理还包括了watcher和dep的概念。Watcher 用于监听数据的变化，并在变化时触发相应的回调函数，而 Dep 则用于收集 Watcher，当数据发生变化时通知所有相关的 Watcher 去更新视图。

Vue 的响应式原理是一种通过数据劫持实现的观察者模式，通过对数据的监听和更新，实现了数据驱动视图的变化，提高了代码的可维护性和开发效率。

响应式流程:

1. Observe：Vue 在实例化时会对 data 对象进行遍历，将每个属性转换为 getter 和 setter，以进行数据劫持。当数据发生变化时，setter 会被调用。在 setter 中，Vue 会通知所有相关的 Watcher 去更新视图。

2. Compile：Compile 是 Vue 的编译器，用于编译模板，将模板转换为 VNode。在编译模板时，Compile 会根据模板中的指令和表达式创建对应的 Watcher。当数据发生变化时，相关的 Watcher 会被触发，从而更新视图。

3. Watcher：Watcher 是订阅者，用于监听数据的变化，并在变化时触发相应的回调函数。每个 Watcher 都会对应一个数据项和一个表达式。当数据发生变化时，Watcher 会重新计算表达式的值，并触发回调函数。

4. Dep：Dep 用于收集 Watcher，当数据发生变化时通知所有相关的 Watcher 去更新视图。在 Observe 中，每个属性都会对应一个 Dep。在 getter 中，如果当前 Watcher 存在，则会将该 Watcher 添加到 Dep 中。在 setter 中，如果数据发生变化，则会通知 Dep 中所有的 Watcher 去更新视图。

综上所述，Observe、Compile、Watcher 和 Dep 一起构成了 Vue 的响应式流程。这一流程包括了数据劫持、模板编译、订阅者监听和更新视图等多个环节，从而实现了 Vue 的数据驱动视图的特性。