再贴一下之前的一张图:
我们已经实现了 Observer 和 Directive,并且自己实现了一个 v-on
的指令,那么再实现 Dep
和 Watcher
就完整了。
这里的 dep.js
其实就是一个记录依赖关系的,他有一个内部的数组 subs
会把所有依赖的 watcher
记录在里面,然后 observer
在观察到数据改变的时候,就告诉dep,它会负责遍历 subs
并调用他们的 update
也就是通知所有相关的 watcher
所以代码这里就不贴了,大家可以直接去看源码。这也是唯一一个我没有自己实现而是从 vuejs
中复制过来的类。
那么现在我们自己实现一个 Watcher 类
首先定义我们的scope,Watcher 到底要做什么?
还记得上一篇我们的 Directive
类么,它会拿到一个 descriptor
作为参数,而他依赖watcher来知道什么时候需要执行update。那么什么时候需要执行 update
呢?显然是指令的表达式中的值更新了就需要执行 update
。
举个栗子:
Hello <span v-text=“name”></span>
这里通过 v-text
指令绑定了 this.name
,那么当name更新的时候显然需要更新DOM,如何更新DOM我们这里不关心,这是 v-text
指令中实现的,我们关心的只是调用他的 update
方法。
所以,我们的watcher需要知道这些:
- vm, 也就是vue实例,因为我们需要通过
vm.nam