这样的话，我们只需要在Object.defineProperty的get要调用的函数里，判断有没有值，就知道到底是Watcher 在get，还是我们自己在查看赋值，如果是Watcher的话就addSub(),代码补充一下
export function defineReactive (obj, key, val) { var dep = new Dep() var childOb = observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: ()=>{ // 说明这是watch 引起的 if(Dep.target){ dep.addSub(Dep.target) } return val }, set:newVal=> { var value = val if (newVal === value) { return } val = newVal childOb = observe(newVal) dep.notify() } }) }
最后不要忘记，在Dep.js中加上这么一句
Dep.target = null
4. 实现一个 Vue
还差一步就大功告成了，我们要把以上代码配合Vue的$watch方法来用，要watch Vue实例的属性，算了，不要理会我在说什么，直接看代码吧
import Watcher from '../watcher' import {observe} from "../observer" export default class Vue { constructor (options={}) { //这里简化了。。其实要merge this.$options=options //这里简化了。。其实要区分的 let data = this._data=this.$options.data Object.keys(data).forEach(key=>this._proxy(key)) observe(data,this) } $watch(expOrFn, cb, options){ new Watcher(this, expOrFn, cb) } _proxy(key) { var self = this Object.defineProperty(self, key, { configurable: true, enumerable: true, get: function proxyGetter () { return self._data[key] }, set: function proxySetter (val) { self._data[key] = val } }) } }
非常简单。两件事，observe自己的data，代理自己的data，使访问自己的属性，就是访问子data的属性。。
截止到现在，在我们只考虑最简单情况下，整个流程终于跑通了。肯定会有很多bug，本文主要目的是展示整个工作流，帮助读者理解。
代码在https://github.com/georgebbbb...，
我是一万个不想展示自己代码，因为很多槽点，还请见谅
下一篇，有两个方向，将聊一聊如何实现双向绑定，或者是如何watch数组。
关于vue2.0的新文章