创建Watcher对象的时候,需要传递vm和表达式,为了获取到表达式的值,同时传递了一个回调函数,主要是为了把变化后的值传递出去以便更新视图。那么应该在什么时候创建Watcher对象呢?应该在模板编译的时候,当检测到元素上使用了vue指令绑定data中的数据或者使用mustache表达式绑定data中的数据的时候,就需要创建一个Watcher对象了,如:CompileUtil = { model(node, expr, vm) { new Watcher(vm, expr, (newValue) => { node.value = newValue; }); const value = this.getVal(vm, expr); // 获取表达式的值 node.value = value; // 对于v-model指令,直接给DOM的value属性赋值即可 }, getContentValue(vm, expr) { return expr.replace(/\{\{(.+?)\}\}/g,(...args) => { return this.getVal(vm, args\[1\]); // 重新获取最新的值 }); }, text(node, expr, vm) { let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => { new Watcher(vm, args[1], () => { //每次匹配到一个就创建一个Watcher对象 node.textContent = this.getContentValue(vm, expr); }); return this.getVal(vm, args[1]); }); node.textContent = content; // 替换文本节点的内容 } }Watcher对象创建好之后,那么又需要在什么时候添加到对应的发布对象中呢?当Watcher对象创建好之后,会立即去获取对应的值,从而会触发对应数据的getter方法,所以在调用getter方法的时候将创建的Watcher对象添加到发布者对象中,如:class Observer { defineReactive(obj, key, value) { // 每个key对应一个发布者对象 let dep