发布订阅模式 实现MVVM,主要是一个双向绑定的内容。
实现比较好的、且诸事比较完整的双向绑定是 _NewMVVM
整体流程如下:
- Vue 实例初始化,触发Compile方法与Observe方法
没错,虽然是构造函数的样子,但是确实是作为普通函数存在的。
- Compile 对DOM进行解析。遍历所有文本节点,通过正则匹配出
{{ name }}
模板语法绑定的数据;通过对标签属性遍历,识别出v-model="more.like"
双向绑定需要的节点与数据的对应关系 - Observe 对数据进行监听,通过Proxy 或者 definneProperty 设置 getter,setter。
Compile 递归访问DOM;Observe递归劫持数据 —— 登对!
- Compile中拿到节点与绑定的数据的访问链路(一个字符串:比如
more.like
)的时候,会创建一个Watcher,这个Watcher实例中存储了【node节点、数据访问链路、节点更新函数】
,并且还会通过Dependency.temp
缓存当前的Watcher实例。 - Watcher实例创建的过程中,除了正常的初始化之外,还通过数据访问链路对数据进行了访问,以此来触发getter
- getter被触发的时候,就会向Dependency实例 —— dependency 添加订阅者。订阅者正是通过
Dependency.temp
拿到的。 - 数据发生改变的时候,会触发setter,setter中通过dependency实例来通知所有的订阅者Watcher,并执行其节点更新函数。
详细的逻辑图如下: