以下是我对 vue 观察者模式的理解:github L6zt
不要对框架的偏见, 你真的了解 jquery、angular、react 等等，框架是什么只是工具而已。你用过 jquery 的 trigger、on、off 事件绑定的方法吗？事实上 vue 不过也是这种模式，只不过 vue 是自动调用 on 方法，自动触发 trigger。甚至可以不用 jquery 对事件监听触发的实现。其实最终解释就是对某种事件的 callback（基础原理）。以下是源码目录截图：1… vue 实例初始化时，会对 data 函数返回的对象里的属性调用以下方法，代码注释如下:
// 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把 data 函数返回的对象变量属性，重写对应属性的 赋值 和获取的操作。具体查看（mdn Object.defineProperty api）
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
// watcher 对象，如果存在
if (Dep.target) {
// 把 Watcher 实例 推入 Dep 实例的 subs 数组里，这个就相当于 on
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== ‘production’ && customSetter) {
customSetter()
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
// 通知 Dep 实例 中 subs 里数组 中所有 Watcher 实例, 然后调用 Watcher 实例里的 update 方法 (), 这个就相当于 trigger。
dep.notify()
}
})
// Watcher 构造函数
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
)
2…Watcher 初始化时，会调用 Dep.pushTarget 方法, 把 Wathcer 实例赋值到 dep.js 里的 Dep.target, 接着会根据 exporFn，运行 exporFn 所代表的方法。这个方法里基本上包含调用 1… 里的 getter 方法 (想想 render 钩子里的操作基本有获取 vue 实例属性 data 里的值或者获取 vue 实例的计算属性的值)。
var vm = new Vue({
data () {
return {msg: ‘ 找个小姐姐！’}
},
// 相当于 exporFn
render(h) {
return h(‘h3’, {},
// 这里面就会调用 msg 对应的 getter 方法
this.msg
)
}
})
所以就会使 render 函数 与 Vue 实例 的 数据 data 属性 和观察属性等产生联系，这就形成一个闭环。当其中的属性变化，就会自动调用 setter 方法，从而触发 dep.notify 方法，进而又会触发 dep.subs 里的 Watcher 实例调用 update 方法，进而更新。（这部分代码不知如何说，故此没写, 具体查看源码）