详解Vue双向数据绑定原理解析(2)

1.自身实例化时在属性订阅器集合dep里添加自己
2.自身需有update方法
3.调用dep.notice时，watcher调用自身的update ,触发Compile中定义的回调

function Watcher(vm, expOrFn, cb) { this.cb = cb; this.vm = vm; this.expOrFn = expOrFn; this.value = this.get(); } Watcher.prototype = { update: function() { this.run(); }, run: function() { var value = this.get(); var oldVal = this.value; if (value !== oldVal) { this.value = value; this.cb.call(this.vm, value, oldVal); } }, get: function() { Dep.target = this; var value = this.getter.call(this.vm, this.vm); Dep.target = null; return value; } };

这里需要注意的点是，实例化watcher的时候，调用get方法，通过Dep.target = curInstance，强行触发获属性值的getter方法，在属性的订阅器中添加当前watcher实例。

小结

双向绑定的原理很简单，通过数据劫持，当设置新属性值的时候通过订阅者更新视图；编译指令，替换变量，同时绑定更新函数到订阅者；对应事件绑定调用addEventListener进行监听。