Dep
- 它的实例是什么时候创建的?
初始化的时候为data中的所有属性进行数据劫持(添加get和set)是创建的 - 个数?
与data中的属性一一对应 - Dep的结构?
id: 每一个dep的独立标识
subs: [] n个相关的watcher的容器
Watcher
-
它的实例是什么时候创建的? {{a}} v-text=“a”
初始化的解析(一般指令/大括号表达式)时候创建 -
个数?
与模版中表达式(不包含事件指令)一一对应 -
watcher的结构?
this.cb = cb; //用于更新界面的回调函数
this.vm = vm; //MVVM的实例vm
this.exp = exp; //对应的表达式
this.depIds = {}; //n个相关的dep的容器
this.value = this.get(); //当前表达式对应的value
Dep和watcher之间的关系
-
什么关系?
多对多的关系
name --> Dep --> n个watcher(属性在模版中多次被使用)
表达式 --> watcher --> n个Dep(多层表达式)
{{a}} -> watcher -> 1个dep
{{a.b}} -> watcher -> 2个dep -
如何建立关系?
vm.name ==> data中的name改变 ==> name的set方法被调用 ===> dep ==> 相关的所有watcher ==>
===> cb() ==> updater
详细关系
vm.msg = "cc"
---> vm代理的msg属性的set方法会被触发
---> data中的msg属性值发生变化
---> msg的set()会被调用
---> msg相关的dep.notify(); watcher.update()
---> cb() ---> updater
function Watcher(vm, exp, cb) {
//在watcher的实例上保存回调函数
this.cb = cb; //用于更新界面的回调函数
this.vm = vm; //MVVM的实例vm
this.exp = exp; //对应的表达式
this.depIds = {}; //n个相关的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) {
//判断当前depIds中是否已经拥有了dep
//当模版首次更新的时候都是没有的,需要添加,当页面数据发生改变的时候同时会调用此方法,但是depIds中已经拥有了当前的dep,所以就不用再添加了
if (!this.depIds.hasOwnProperty(dep.id)) {
//调用dep的addSub方法进行对watcher实例的添加
dep.addSub(this);//此时this是watcher的实例
//添加当前的dep到depIds中,并且把dep.id的值作为depIds的key
this.depIds[dep.id] = dep;
}
},
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;
exp.forEach(function(k) {
//读取_data中表达式所对应的值 (此时会触发observer中的get方法)
val = val[k];
});
return val;
}
};
每个子属性的watcher在添加到子属性的dep的同时,也会添加到父属性的dep 监听子属性的同时监听父属性的变更,这样,父属性改变时,子属性的watcher也能收到通知进行update 这一步是在
this.get() --> this.getVMVal() 里面完成,forEach时会从父级开始取值,间接调用 了它的getter
触发了addDep(), 在整个forEach过程,当前wacher都会加入到每个父级过程属性的dep
例如:当前watcher的是’child.child.name’, 那么child, child.child,
child.child.name这三个属性的dep都会加入当前watcher