vue简版源码observer

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;

 

版权声明:玥玥 发表于 2021-05-03 18:49:52。
转载请注明:vue简版源码observer | 女黑客导航