原理
- 视图(view)变化更新数据(data)。这个很简单,通过事件监听就可以实现
- 数据(data)变化更新视图(view)。通过数据劫持(即Object.defineProperty( )方法)结合发布者-订阅者模式
下面重点介绍 数据变化更新视图。
总流程:
全文浓缩为一句话:
Vue是采用
1.数据劫持结合发布/订阅模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter
2. 在数据变动时发布消息给订阅者
3. 触发相应的监听回调
- 请看完再回过头来看这句话,下面是一个粗暴的双向数据绑定
数据劫持:Object.defineProperty方法
首先得了解一下这个方法有什么用:
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
我们通过Object.defineProperty( )设置了对象Book的name属性,对其get和set进行重写操作,顾名思义,get就是在读取name属性这个值触发的函数,set就是在设置name属性这个值触发的函数,所以当执行 Book.name = ‘vue权威指南’ 这个语句时,控制台会打印出 "你取了一个书名叫做vue权威指南
意思就是说:赋值的时候会触发set函数,取值的时候会触发get函数
这样,就有了数据变化更新视图的理论基础,如下图:
实现过程
-
实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
-
实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
-
实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
Ps:因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者
1.实现一个Observer(Object.defineProperty( ))
Observer = (Object.defineProperty() 监听 + 递归 ) + 订阅器
Observer是一个数据监听器,其实现核心方法就是前文所说的Object.defineProperty( )。如果要对所有属性都进行监听的话,那么可以通过递归方法遍历所有属性值,并对其进行Object.defineProperty( )处理。如下代码,实现了一个Observer。
function defineReactive(data, key, val) {
observe(val); // 递归遍历所有子属性
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
return val;
},
set: function(newVal) {
val = newVal;
console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
}
});
}
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
var library = {
book1: {
name: ''
},
book2: ''
};
observe(library);
library.book1.name = 'vue权威指南'; // 属性name已经被监听了,现在值为:“vue权威指南”
library.book2 = '没有此书籍'; // 属性book2已经被监听了,现在值为:“没有此书籍”
- 思路分析中,需要创建一个可以容纳订阅者的消息订阅器Dep,订阅器Dep主要负责收集订阅者,然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅器需要有一个容器,这个容器就是list,将上面的Observer稍微改造下,植入消息订阅器:
Observer一旦有了set触发,就会通知到Dep
function defineReactive(data, key, val) {
// observe(val); // 递归遍历所有子属性
// var dep = new Dep();
Object.defineProperty(data, key, {
// enumerable: true,
// configurable: true,
get: function() {
//增加了这里
//我们将订阅器Dep添加一个订阅者设计在getter里面,
//这是为了让Watcher初始化进行触发,
//因此需要判断是否要添加订阅者,至于具体设计方案,下文会详细说明的。
if (是否需要添加订阅者) {
dep.addSub(watcher); // 在这里添加一个订阅者
}
return val;
},
// set: function(newVal) {
// if (val === newVal) {
// return;
// }
// val = newVal;
// console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
// dep.notify(); // 如果数据变化,通知所有订阅者
// }
});
}
//下面是订阅器
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
在setter函数里面,如果数据变化,就会去通知所有订阅者,订阅者们就会去执行对应的更新的函数。到此为止,一个比较完整Observer已经实现了,接下来我们开始设计Watcher。
2.实现Watcher
- 订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中
- 而监听器Observer是在get函数执行了添加订阅者Wather的操作的,所以我们只要在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作即可
- 这里还有一个细节点需要处理,我们只要在订阅者Watcher初始化的时候才需要添加订阅者,所以需要做一个判断操作,因此可以在订阅器上做一下手脚:在Dep.target上缓存下订阅者,添加成功后再将其去掉就可以了。订阅者Watcher的实现如下:
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get: function() {
Dep.target = this; // 缓存自己
var value = this.vm.data[this.exp] // 强制执行监听器里的get函数
Dep.target = null; // 释放自己
return value;
}
};
这时候,我们需要对监听器Observer也做个稍微调整,主要是对应Watcher类原型上的get函数。需要调整地方在于defineReactive函数:
function defineReactive(data, key, val) {
// observe(val); // 递归遍历所有子属性
// var dep = new Dep();
Object.defineProperty(data, key, {
// enumerable: true,
// configurable: true,
get: function() {
if (Dep.target) { // 判断是否需要添加订阅者
dep.addSub(Dep.target); // 在这里添加一个订阅者
}
return val;
},
// set: function(newVal) {
// if (val === newVal) {
// return;
// }
// val = newVal;
// console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
// dep.notify(); // 如果数据变化,通知所有订阅者
// }
});
}
Dep.target = null;
到此为止,简单版的Watcher设计完毕,这时候我们只要将Observer和Watcher关联起来,就可以实现一个简单的双向绑定数据了。
3.实现Compile(事件监听)
虽然上面已经实现了一个双向数据绑定的例子,但是整个过程都没有去解析dom节点,而是直接固定某个节点进行替换数据的,所以接下来需要实现一个解析器Compile来做解析和绑定工作。解析器Compile实现步骤:
-
解析模板指令,并替换模板数据,初始化视图
-
将模板指令对应的节点绑定对应的更新函数,初始化相应的订阅器
-
为了解析模板,首先需要获取到dom元素,然后对含有dom元素上含有指令的节点进行处理
大概总结到这里,详情还请看:vue的双向绑定原理及实现
总的来说:
首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;
然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会;
接着为input会添加监听事件,修改值就等于为该属性赋值,则会触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。