Vue原理

52次阅读

共计 523 个字符,预计需要花费 2 分钟才能阅读完成。

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

实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
实现一个 Watcher,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

正文完
 0