vue响应式原理

vue响应式原理

要了解响应式原理首先应该知道什么是响应式

vue的响应式原理是什么

vue数据的双向绑定是通过数据劫持结合发布订阅模式，侦测到数据变化，然后通过Object.defineProperty()对象对每个属性的getter和setter进行劫持。当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法。检测到数据变化，发布消息给到订阅者，重新渲染页面。

对于对象

• 由于js的限制，vue没有办法直接检测数组或者对象中的变化。

• 如果我们在某些地方为在data中对象直接添加一些属性，那么这些属性对于vue来说就是非响应式的，

  它的变化并不会被vue所监测到。

向data中的数据添加响应式属性

• Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。

简述vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。