Vue2数据的双向绑定理解及实现

265 阅读1分钟

双向绑定原理

利用Object.defineProperty()方法进行的数据劫持,利用 set、get 检测数据的读写。 MVVM 框架主要包含两个方面,数据变化更新视图,视图变化更新数据。 视图变化更新数据:input 标签使用 oninput 事件 数据变化更新视图:利用 Object.defineProperty()的 set 方法检测数据变化,当数据改变时触发此函数更新视图。

实现过程

  1. 实现一个监听器Observer,用来劫持并监听属性变化,并通知订阅者。
  2. 实现一个订阅者Watcher,当接到属性变化通知时,执行对应函数并更新视图,使用Dep来收集这些Watcher
  3. 实现一个解析器Compile,用于扫描和解析节点的相关指令,并根据初始化模板去初始化对应的订阅器 流程图如下:

image.png