vue源码分析(observe篇)
Posted 一只燕仔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue源码分析(observe篇)相关的知识,希望对你有一定的参考价值。
function Observer(data) {
this.data = data; //暂存data
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
var me = this;//暂存this
Object.keys(data).forEach(function(key) { //对data里所有的属性名进行遍历
me.convert(key, data[key]);
});
},
convert: function(key, val) {
this.defineReactive(this.data, key, val);
},
defineReactive: function(data, key, val) {
var dep = new Dep(); //为data中所有属性都创建一个dep实例
var childObj = observe(val); //递归遍历data中所有层次的属性
//为原有属性新增get和set方法(数据劫持)
Object.defineProperty(data, key, {
enumerable: true, // 是否可枚举
configurable: false, // 是否可重写
get: function() { //get方法
//判断当前Dep.target的watcher是否存在
if (Dep.target) {//当模版初始化的时候会赋值watcher实例到target上
//调用dep的depend方法
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
childObj = observe(newVal);
// 通知订阅者
dep.notify();
}
});
}
};
function observe(value, vm) {
//判断value是否存在或者value的数据类型是否为object(递归的终止条件)
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value); //返回数据劫持
};
var uid = 0; //定义一个uid
function Dep() {
this.id = uid++; //自增,每创建一个dep增加一个单独标识
this.subs = []; //watcher
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
//调用watcher实例的addDep方法
depend: function() {
//Dep.target此时是watcher的实例
//this此时是当前dep的实例
Dep.target.addDep(this);
},
removeSub: function(sub) {
var index = this.subs.indexOf(sub);
if (index != -1) {//判断元素是否存在
this.subs.splice(index, 1); //截取
}
},
//通知所有的watcher
notify: function() {
// beforeUpdate
//遍历subs中所有的watcher的实例
this.subs.forEach(function(sub) {
//每个watcher实例都会调用update方法
sub.update();
});
// updated
}
};
Dep.target = null; //赋空
以上是关于vue源码分析(observe篇)的主要内容,如果未能解决你的问题,请参考以下文章