完整代码 (https://github.com/mfaying/si…
双向绑定对于 vue.js 来说非常重要,也是该框架的特色之一。那么该如何实现数据的双向绑定呢?本文将基于 vue.js 2.x 版本讲解双向绑定的原理。Object 和 Array 的实现原理有所不同,本文讲解 Object 双向绑定的原理。
要实现双向绑定,必须能监听到数据的取值和赋值,幸运的是 javascript 原生提供了 Object.defineProperty 可以实现监听。
function defineReactive(data, key, val) {if (typeof val === "object") {new Observer(val);
}
let dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {dep.depend();
return val;
},
set: function(newVal) {if (val === newVal) {return;}
val = newVal;
dep.notify();}
});
}
我们在 get 中收集依赖,在 set 中触发依赖。依赖收集在 dep 中,它的定义如下:
export default class Dep {constructor() {this.subs = [];
}
addSub(sub) {this.subs.push(sub);
}
removeSub(sub) {remove(this.subs, sub);
}
depend() {if (window.target) {this.addSub(window.target);
}
}
notify() {const subs = this.subs.slice();
for (let i = 0, l = subs.length; i < l; i++) {subs[i].update();}
}
}
function remove(arr, item) {if (arr.length) {const index = arr.indexOf(item);
if (index > -1) {return arr.splice(index, 1);
}
}
}
Dep 将依赖管理的逻辑解耦出来了。它的原理也很简单,基于数组来管理依赖。
那么依赖被通知了,它会执行什么呢?答案是 watcher。watcher 可以理解为任意数据改变需要触发操作的东西,如视图更新。
import {parsePath} from "./util";
export default class Watcher {constructor(vm, expOrFn, cb) {
this.vm = vm;
this.getter = parsePath(expOrFn);
this.cb = cb;
this.value = this.get();}
get() {
window.target = this;
let value = this.getter.call(this.vm, this.vm);
window.target = undefined;
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue);
}
}
Watcher 和 Dep 通过一个共同变量 window.target,可以实现依赖的自动收集。
最后,我们需要一个 Observer 类,它可以将一个普通对象完全转换为响应式数据。无论 key 在对象的什么位置,因为它在实现上使用了递归。
class Observer {constructor(value) {
this.value = value;
if (!Array.isArray(value)) {this.walk(value);
}
}
walk(obj) {const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {defineReactive(obj, keys[i], obj[keys[i]]);
}
}
}
function defineReactive(data, key, val) {if (typeof val === "object") {new Observer(val);
}
let dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {dep.depend();
return val;
},
set: function(newVal) {if (val === newVal) {return;}
val = newVal;
dep.notify();}
});
}
最后让我们来验证一下
import Observer from "./Observer";
import Watcher from "./Watcher";
window.data = {
a: {
b: {c: 1}
}
};
new Observer(window.data);
new Watcher(window.data, "a.b", () => {console.log("watcher");
});
// 执行后打印 watcher
window.data.a.b = 1;
参考
《深入浅出 Vue.js》
完整代码 (https://github.com/mfaying/si…