function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data); } Observer.prototype = { walk: function(data) { //暂存this确保指向正确 var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(function(key) { me.convert(key, data[key]); }); }, convert: function(key, val) { //为每个属性增加响应式 this.defineReactive(this.data, key, val); }, defineReactive: function(data, key, val) { //为data中所有层次的属性都创建一个dep实例 var dep = new Dep(); //递归遍历data中所有层次的属性 var childObj = observe(val); //为原有属性新增get和set方法(数据劫持) Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { //判断当前Dep.target的watcher是否存在 if (Dep.target) {//当模版初始化的时候会赋值watcher实例到target上 //调用dep的depend方法 dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; // 新的值是object的话,进行监听 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; function Dep() { //没创建一个dep都会给这个dep增加一个独立的标识 this.id = uid++; 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(); }); } }; Dep.target = null;