Vue2的响应式原理

Vue2的响应式原理

Vue2的响应式原理主要是通过Object.defineProperty()方法来实现数据的劫持，并结合发布订阅者模式进行工作。以下是具体步骤：

• Vue在初始化时，会对data中的所有属性通过Object.defineProperty()方法转化为getter和setter的访问形式。
• Vue中的每个组件实例都会对应一个watcher实例，它会在组件渲染的过程中把使用过的数据属性通过getter收集为依赖。
• 当数据发生变化时，会触发对应的setter方法，此时Vue会通知所有依赖这个数据的watcher实例进行更新，进而触发组件的重新渲染。

因此，Vue的响应式原理可以概括为：通过Object.defineProperty()方法劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调，从而实现数据的响应式更新。

限制：

• Object.defineProperty限制：由于Vue2使用的是Object.defineProperty，它只能监听对象属性的变化，而不能直接监听数组的变化。因此，Vue提供了特定的数组变异方法来解决这个问题。
• ES5的限制：由于Vue2的响应式系统是基于ES5的Object.defineProperty实现的，这导致它不支持ES6中的Map和Set等类型的数据响应式。