Vue2的响应式原理

简介: Vue2的响应式原理主要是通**过Object.defineProperty()方法来实现数据的劫持**,并结合**发布订阅者模式**进行工作。

Vue2的响应式原理

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

001.png

  • 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等类型的数据响应式
相关文章
|
6天前
|
JavaScript API
Vue3的响应式原理
Vue 3 中的响应式原理是通过使用 ES6 的 `Proxy 对象`来实现的**。在 Vue 3 中,每个组件都有一个响应式代理对象,当组件中的数据发生变化时,代理对象会立即响应并更新视图。
|
9月前
|
JavaScript 索引
Vue3 响应式原理(二)
Vue3 响应式原理(二)
183 0
|
6天前
|
存储 JavaScript
Vue的响应式原理是什么?
Vue的响应式原理是什么?
20 3
|
7月前
|
存储 缓存 JavaScript
vue3响应式实现原理(2)
vue3响应式实现原理(2)
|
7月前
vue3响应式实现原理(5)
vue3响应式实现原理(5)
|
7月前
|
调度
vue3响应式实现原理(3)
vue3响应式实现原理(3)
|
7月前
vue3响应式实现原理(1)
vue3响应式实现原理(1)
|
9月前
|
JavaScript
Vue响应式数据的原理
Vue响应式数据的原理
|
9月前
|
测试技术 API 索引
Vue3 响应式原理(一)
Vue3 响应式原理
47 0
|
9月前
|
API
Vue3 响应式原理(四)
Vue3 响应式原理(四)
73 0