Vue原理

vue双向绑定的核心是经过Object.defineProperty()在实现数据劫持。由于Object.defineProperty()是ES5中一个没法shim的特性,这也就是为何vue支持IE8以上的浏览器。
clipboard.png
首先咱们须要设置一个监听器Observer,用来监听全部属性。若是属性值发生了改变,就须要告诉订阅者Watcher看是否须要更新。由于订阅者是有不少个,因此,咱们须要有一个消息订阅器Dep来专门收集这些订阅者,而后在监听者和订阅者之间进行统一管理。接着,咱们还须要一个指令解析器,对每一个节点进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定响应的函数,此时当Watcher接收到响应属性的变化,就会执行对应的更新函数,从而更新视图。vue

  • 实现一个数据监听器Observer,可以对数据对象的全部属性进行监听,若有变更可拿到最新值并通知订阅者
  • 实现一个指令解析器Compile,对每一个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  • 实现一个Watcher,做为链接Observer和Compile的桥梁,可以订阅并收到每一个属性变更的通知,执行指令绑定的相应回调函数,从而更新视图
相关文章
相关标签/搜索