VueJS双向数据绑定实现

作者:日期:2018-01-18 14:51:37 点击:242

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();
}
}
})

上一篇: Vue事件处理

下一篇: 深入理解Virtual DOM 算法