VueJS双向数据绑定实现

Object.defineProperty简单应用

var obj = {};
Object.defineProperty(obj, 'hello', {
get: function() {
console.log('get方法获取值');
},
set: function(val) {
console.log('set方法设置的值为：' + val);
}
});
obj.hello; // get方法获取值
obj.hello = 'Hello World';

实现数据和视图的联动，即实现双向绑定，听起来是不是很牛叉？并且Vue.js和Avalon.js 都是通过它实现双向绑定的。是不是有点小激动呢？所以更有必要了解一下了几行代码看它怎么用？

基本用法

var a = {};
Object.defineProperty(a, 'b', {
value: 123
});
console.log(a.b); // 123

很简单，它接受三个参数，而且都是必填的。

参数介绍:

第一个参数：目标对象
第二个参数：需要定义的属性或方法的名字。
第三个参数：目标属性所拥有的特性。

前两个参数不多说了，一看代码就懂，主要看第三个参数，看看有哪些取值。

value ：属性的值。
writable ：如果为 false ，属性的值就不能被重写,只能为只读了。
configurable ：总开关，一旦为 false ，就不能再设置他的（ value ， writable ， configurable ）。
enumerable ：是否能在 for…in 循环中遍历出来或在 Object.keys 中列举出来。
get ：见下面例子。
set ：见下面例子。

接下来，该是到了用实例说话的时候了。

var a = {};
Object.defineProperty(a, 'b', {
value: 123
});
console.log(a.b); // 123

我们只设置了 value ，别的并没有设置，但是第一次的时候可以简单的理解为（暂时这样理解）它会默认帮我们把 writable 、 configurable 、 enumerable 、都设上值，而且值还都是 false 。也就是说，上面代码和下面是等价的的（仅限于第一次设置的时候）：

var a = {};
Object.defineProperty(a, 'b', {
value: 123,
writable: false,
enumerable: false,
configurable: false
});
console.log(a.b); //123

configurable

总开关，第一次设置 false 之后，，第二次什么设置也不行了，比如说：

var a = {};
Object.defineProperty(a, 'b', {
configurable: false
});
Object.defineProperty(a, 'b', { // Uncaught TypeError: Cannot redefine property: b(…)
configurable: true
});

如果第一次不设置，第二次再设置同样会报错。

writable

如果设置为 fasle ，就变成只读了。。

var a = {};
Object.defineProperty(a, 'b', {
value: 123,
writable: false
});
console.log(a.b); // 打印 123
a.b = 124; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
console.log(a.b); // 打印 123， 赋值不起作用。

enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。

var a = {};
Object.defineProperty(a, "b", {
value: 3445,
enumerable: true
});
console.log(Object.keys(a)); // 打印["b"]

改为 false

var a = {};
Object.defineProperty(a, "b", {
value: 3445,
enumerable: false //注意咯这里改了
});
console.log(Object.keys(a)); // 打印[]

for…in 类似，不赘述了。

set 和 get

在参数中不能同时设置访问器 ( get 和 set ) 和 wriable 或 value ，否则会错，就是说想用( get 和 set )，就不能用（ wriable 或 value 中的任何一个）

set 和 get ，他俩干啥用的的？

var a = {};
Object.defineProperty(a, 'b', {
set: function(newValue) {
console.log('你要赋值给我，我的新值是：'+ newValue);
},
get: function() {
console.log("你取我的值");
return 2; //注意这里，我硬编码返回2
}
});
a.b = 1; //打印 你要赋值给我,我的新值是1
console.log(a.b); //打印 你取我的值 2

简单来说，这个 b 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

现在开始使用 Object.defineProperty 实现数据和视图的联动。

<!-- HTML -->
<div> 
你好，<span id='nickName'></span>
<div id="introduce"></div>
</div>
// JavaScript
// 视图控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
get: function() {
return document.getElementById('nickName').innerHTML;
},
set: function(nick) {
document.getElementById('nickName').innerHTML = nick;
}
});
Object.defineProperty(userInfo, "introduce", {
get: function() {
return document.getElementById('introduce').innerHTML;
},
set: function(introduce) {
document.getElementById('introduce').innerHTML = introduce;
}
});
userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx，我来自云南，..."

设置 userInfo 的 nickName 属性时会调用 set 方法，更新DOM节点的HTML。

Vue 事件驱动和依赖追踪

在之前实现一个自己的MVVM中，用 setter 来观测 model ，将界面上所有的 viewModel 绑定到 model 上。当 model 改变，更新所有的 viewModel ，将新值渲染到界面上。同时监听界面上通过 v-model 绑定的所有 input ，并通过 addEventListener 事件将新值更新到 model 上，以此来完成双向绑定。

为数据定义 getter & setter

class Observer {
constructor(data) {
this._data = data;
this.walk(this._data);
}
walk(data) {
Object.keys(data).forEach((key) => {
this.defineRective(data, key, data[key])
})
};
defineRective(vm, key, value) {
var self = this;
if (value && typeof value === "object") {
this.walk(value);
}
Object.defineProperty(vm, key, {
get: function() {
return value;
},
set: function(newVal) {
if (value != newVal) {
if (newVal && typeof newVal === "object") {
self.walk(newVal);
}
value = newVal;
}
}
})
}
}
module.exports = Observer;

这样，就为每个属性添加了 getter 和 setter ，当属性是一个对象，那么就递归添加。

一旦获取属性值或者为属性赋值就会触发 get 或 set ，当触发了 set ，即 model 变化，就可以发布一个消息，通知所有 viewModel 更新。

defineRective(vm, key, value) {
// 将这个属性的依赖表达式存储在闭包中。
var dep = new Dep();
var self = this;
if (value && typeof value === "object") {
this.walk(value);
}
Object.defineProperty(vm, key, {
get: function() {
return value;
},
set: function(newVal) {
if (value != newVal) {
if (newVal && typeof newVal === "object") {
self.walk(newVal);
}
value = newVal;
// 通知所有的 viewModel 更新
dep.notify();
}
}
})
}

那么怎么定义 Dep 呢？？

class Dep {
constructor() {
// 依赖列表
this.dependences = [];
}
// 添加依赖
addDep(watcher) {
if (watcher) {
this.dependences.push(watcher);
}
}
// 通知所有依赖更新
notify() {
this.dependences.forEach((watcher) => {
watcher.update();
})
}
}
module.exports = Dep;

这里的每个依赖就是一个 Watcher 。看看如何定义 Watcher 。这里每一个 Watcher 都会有一个唯一的 id 号，它拥有一个表达式和一个回调函数。

比如表达式 a +b ; 会在 get 计算时访问 a 与 b ，由于 JavaScript是单线程，任一时刻只有一处JavaScript代码在执行，用 Dep.target 作为一个全局变量来表示当前 Watcher 的表达式，然后通过 compute 访问 a ， b ，触发 a 与 b 的 getter ，在 getter 里面将 Dep.target 添加为依赖。

一旦 a 与 b 的 set 触发，调用 update 函数，更新依赖的值。

var uid = 0;
class Watcher {
constructor(viewModel, exp, callback) {
this.viewModel = viewModel;
this.id = uid++;
this.exp = exp;
this.callback = callback;
this.oldValue = "";
this.update();
}
get() {
Dep.target = this;
var res = this.compute(this.viewModel, this.exp);
Dep.target = null;
return res;
}
update() {
var newValue = this.get();
if (this.oldValue === newValue) {
return;
}
// callback 里进行Dom 的更新操作
this.callback(newValue, this.oldValue);
this.oldValue = newValue;
}
compute(viewModel, exp) {
var res = replaceWith(viewModel, exp);
return res;
}
}
module.exports = Watcher;

由于当前表达式需要在当前的 model 下面执行，所以采用 replaceWith 函数来代替 with

通过 get 添加依赖：

Object.defineProperty(vm, key, {
get: function() {
var watcher = Dep.target;
if (watcher && !dep.dependences[watcher.id]) {
dep.addDep(watcher);
}
return value;
},
set: function(newVal) {
if (value != newVal) {
if (newVal && typeof newVal === "object") {
self.walk(newVal);
}
value = newVal;
dep.notify();
}
}
})