深入响应式原理-vue.js

一、 兼容性
   1.  Vue 最独特的特性之一,就是其非侵入性的响应式系统。
  2. Vue是基于Obje.definePriperty来实现数据响应的,而 Object.defineProperty 是 ES5 中一个无法 shim 的特性,因此Vue不支持 IE8 以及更低版本浏览器。
  3. 受现代JavaScript 的限制 (以及废弃 Object.observe),Vue不能检测到对象属性的添加或删除。
  4. Vue 会在初始化实例时对data 对象的属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让Vue转换它,这样才能让它是响应的。
二、 原理:
   1. Vue会首先进行init初始化操作,在beforeCreate钩子函数执行之后,created钩子函数执行之前执行initState(vm) ,initState是用来初始化props,methods,data,computed和watch;
  2. initState中的initData()会 将_data上面的数据代理到vm上,并通过执行 observe(data, true / asRootData /),实例化一个Observer对象。
  3. Observer类首先将Observer实例绑定到data的ob属性上面去,防止重复绑定;然后遍历data中所有的处理后的数据,进行getter/setter绑定,这里的核心方法就是 defineReative(obj, keys[i], obj[keys[i]])。
  4. defineReative函数重新定义了get和set函数。getter方法先为每个data声明一个 Dep 实例对象,被用于getter时执行dep.depend()进行收集相关的依赖。setter方法获取新的值并且进行observe,保证数据响应式;通过dep对象的notify通知所有观察者去更新数据,从而达到响应式效果。
  5. Watcher 则会执行 run 方法去更新视图。

猜你喜欢

转载自www.cnblogs.com/zhanxj90/p/10933244.html