一.vue简版源码watcher
今天继续探索 Watch 源码,废话不多说了
带着我的几个疑问开始
1、什么时候初始化
2、怎么确定监听哪些值
3、深度监听怎么回事
4、怎么触发我的函数
这些问题的答案会掺杂在源码的解析中,请大家看以下源码
function Watcher(vm, exp, cb) {
//在实例上保存回调函数
this.cb = cb; //更新界面的回调函数
this.vm = vm; //实例vm
this.exp = exp; //对应的表达式
this.depIds = {}; //相关的dep的容器
this.value = this.get(); //当前表达式对应的value
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.get();
var oldVal = this.value;
//判断新旧节点
if (value !== oldVal) {
this.value = value;
//调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
this.cb.call(this.vm, value, oldVal);
}
},
//添加dep到watcher实例的depIds里
addDep: function(dep) {
if (value !== oldVal) {
this.value = value;
//调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
this.cb.call(this.vm, value, oldVal);
}
},
get: function() {
//在watcher初始化的时候保存实例到Dep的target上
Dep.target = this;
//调用get方法获取当前对应表达式的数据
var value = this.getVMVal();
//清空target
Dep.target = null;
return value;
},
getVMVal: function() {
var exp = this.exp.split('.');
var val = this.vm._data; //获取vm_data上的数据
exp.forEach(function(k) {
//读取_data中表达式所对应的值 (此时会触发observer中的get方法)
val = val[k];
});
return val;
}