一、响应式系统
Vue 2 的响应式系统
Vue 2 使用了基于依赖收集的观察模式。对于对象，Vue 2 会遍历对象属性，为每个属性创建一个 Watcher 实例，并在访问这些属性时收集依赖。当属性改变时，会通知相关的 Watcher 更新视图。
Vue 2 响应式原理代码示例
Javascript
深色版本
// Vue 2 的数据响应式部分简化示例
function observe(value) {
if (!value || typeof value !== 'object') {
return;
}
new Observer(value);
}
function defineReactive(obj, key, val) {
let dep = new Dep();
Object.defineProperty(obj, key, {
get() {
Dep.target && dep.addDep(Dep.target);
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify();
}
});
}
function initState(vm) {
const opts = vm.$options;
if (opts.data) {
vm._data = data = opts.data;
for (const key in data) {
proxy(vm, '_data', key);
}
observe(data);
}
}
function proxy(target, sourceKey, key) {
Object.defineProperty(target, key, {
get() {
return target[sourceKey][key];
},
set(val) {
target[sourceKey][key] = val;
}
});
}
class Dep {
constructor() {
this.deps = [];
}
addDep(dep) {
this.deps.push(dep);
}
notify() {
this.deps.forEach(dep => dep.update());
}
}
