62 VueComponent watcher 的实现

 前言 

这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 

主要记录的是 vue 的相关实现机制 

呵呵 理解本文需要 vue 的使用基础, js 的使用基础 

 

 

 测试用例

用例如下, 我们这里核心关注 watch.counter 的处理流程的实现 

 

 

问题的调试

在初始化 VueComponent 的时候, 根据用户配置的 watch [从 HelloWorld.vue 中解析的]

来创建 watcher, 创建关联 什么的

 

 

初始化 Watcher 的时候 将其添加到关联的 VueComponent 上面 

 

 

注册当前 watcher 需要关注的相关其他变量 [其他的诸如 computed 变量是类似的道理]

 

为 _data.counter 添加 watcher, 这里 Dep.target 为新建的 Watcher[也就是根据 HelloWorld.watch 创建的 Watcher]

在 _data.counter 上面增加这个 Watcher, 当 _data.counter 更新的时候 处理这个 watcher 相关的业务, 进而 就实现了 watcher 的相关业务 

 

 

当 _data.counter 更新的时候, _data.counter.Dep 来通知所有的 Watcher 

其中之一就是 根据 HelloWorld.watch 创建的 Watcher 

 

 

如下就是 异步处理 HelloWorld.watch 创建的 Watcher 的情况 

 

 

完