双向绑定原理
利用Object.defineProperty()方法进行的数据劫持,利用 set、get 检测数据的读写。
MVVM 框架主要包含两个方面,数据变化更新视图,视图变化更新数据。
视图变化更新数据:input 标签使用 oninput 事件
数据变化更新视图:利用 Object.defineProperty()的 set 方法检测数据变化,当数据改变时触发此函数更新视图。
实现过程
- 实现一个监听器
Observer,用来劫持并监听属性变化,并通知订阅者。 - 实现一个订阅者
Watcher,当接到属性变化通知时,执行对应函数并更新视图,使用Dep来收集这些Watcher - 实现一个解析器
Compile,用于扫描和解析节点的相关指令,并根据初始化模板去初始化对应的订阅器 流程图如下: