再贴一下之前的一张图:
我们已经实现了 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
这里通过
v-text
指令绑定了
this.name
,那么当name更新的时候显然需要更新DOM,如何更新DOM我们这里不关心,这是
v-text
指令中实现的,我们关心的只是调用他的
update
方法。
所以,我们的watcher需要知道这些:
vm, 也就是vue实例,因为我们需要通过 vm.name
取值
expression, 也就是 name
这个字符串,这样我们才知道要取的是 name
,也能知道要观察他的变动。
callback, 也就是 directive.update
export default function Watcher (vm, expOrFn, cb) {
vm._watchers.push(this)
this.vm = vm
this.expOrFn = expOrFn
this.expression = expOrFn
this.cb = cb
this.id = uid // uid for batching
this.deps = []
this.depIds = new Set()
// TODO: support expression, like: "\'Hello\' user.name"
this.getter = () => {
return vm[expOrFn]
}
this.setter = (vm, value) => {
return vm[expOrFn] = value
}
this.value = this.get()
}
Watcher.prototype.update = function () {
this.run()
}
Watcher.prototype.run = function () {
const value = this.get()
const oldValue = this.value
if (value !== oldValue) {
this.cb.call(this.vm, value, oldValue)
}
}
Watcher.prototype.get = function () {
Dep.target = this
const value = this.getter.call(this.vm, this.vm)
Dep.target = null
return value
}
Watcher.prototype.set = function (value) {
return this.setter.call(this.vm, this.vm, value)
}
Watcher.prototype.addDep = function (dep) {
if (!this.depIds.has(dep.id)) {
this.deps.push(dep)
this.depIds.add(dep.id)
dep.addSub(this)
}
}
有几点需要注意的:
1, getter 和 setter
为了方便起见,我们做了一个非常非常非常简单的 getter 和 setter,所以我们不支持
v-text=“‘hello’ name”
这样的表达式。对表达式的支持,在vuejs中做了非常详尽的处理,其中如何处理
people.name
这样路径,就是勾三股四那篇文章的图示讲的内容,有兴趣可以看一下,其实是一个自动状态机
http://jiongks.name/blog/vue-code-review/
2, addDep 是干嘛的?
这里是强调了很多遍的地方,addDep 是把自己加到 deps 的依赖里的。这涉及到vuejs解析依赖的机制:
在vuejs中,对一个表达式比如
name age
, 他的依赖并不是通过解析这个表达式的时候获取的,而是在计算他们的值得时候记录的。也就是在 计算这个表达式的过程中,有哪些
watcher
正在执行 get,就会把他们记录了为对当前observer的依赖。
observer中下面代码就是干这个的:
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val
if (Dep.target) { //.. 当前有一个watcher正在执行 get 方法,那么他肯定依赖这个observe
dep.depend()
}
return value
},
所以 watcher 的get函数开始的时候就会执行:
Dep.target = this
get结束的时候会设置为 null。
请务必理解并牢记,这是一个非常巧妙的设计。
3,关于 batcher
这里我们省略了batcher相关的内容,其实细心的读者应该会发现
update
里面直接调用了
run
那么为什么不直接写成一个函数呢,其实这是因为我们省略了一个非常重要的性能优化:batcher。他会把一个 tick 的变动全部合并执行,而不是每次改动都执行一次DOM的更新。
vuejs中是这么实现的:
`
Watcher.prototype.update = function (shallow) {
if (this.lazy) {
this.dirty = true
} else if (this.sync || !config.async) {
this.run()
} else {
//….
pushWatcher(this)
}
}
只有
sync
模式的时候会执行
run
,也就是更新DOM,默认的
async
模式下只是把
watcher
加入一个队列,在
nextTick
的时候会统一把队列中的watcher都执行。
也就是默认模式下(async) ,vuejs会在nextTick的时候才会更新DOM,所以我们有数据更新之后立刻获取DOM的值很可能是旧的哦。
这一点也很重要,请务必牢记。
到这里为止,我们不仅可以创建 directive,而且当
directive
表达式的值改变的时候,还会执行他的
update
函数,所以我们就能实现更多的指令了。
下一篇我们实现两个常用的指令: v-text 和 v-on