vuejs 源码简化理解

[lolocoo]

// vue source code 
'use strict'
class Observer {
   constructor(value) {
       this.value = value;
       this.walk(value);
   }
   walk(value) {
       Object.keys(value).forEach(key => this.convert(key, value[key]));
   }
   convert(key,value) {
       defineReactive(this.value, key, value);
   }
}

function defineReactive(obj, key, val) {
   var dep = new Dep();

   var childOb = observer(val);
   Object.defineProperty(obj, key, {
       enumberable: true,
       configurable: true,
       get: () => {
           console.log('get value');
           if(Dep.target) {
               dep.addSub(Dep.target);
           }
           return val;
       },
       set: (newVal) => {
           console.log('new value seted');
           if (val === newVal) return;
           val = newVal;
           childOb = observer(newVal);
           dep.notify();
       }
   });
}

function observer(value) {
   if(!value || typeof value !== 'object') {
       return;
   }
   return new Observer(value);
}

class Dep {
   constructor() {
       this.subs = [];
   }
   addSub(sub) {
       this.subs.push(sub);
   }
   notify(){
       this.subs.forEach((sub)=> sub.update());
   }
}

class Watcher {
   constructor(vm, expOrFn, cb) {
       this.vm = vm;
       this.cb = cb;
       this.expOrFn = expOrFn;
       this.val = this.get();
   }
   update() {
       this.run();
   }
   run() {
       const val = this.get();
       if(val !== this.val) {
           this.val = val;
           this.cb.call(this.vm);
       }
   }
   get() {
       Dep.target = this;
       const val = this.vm._data[this.expOrFn];
       Dep.target = null;
       return val;
   }
}

class Vue {
   constructor(options = {}) {
       this.$options = options;
       let data = this._data = this.$options.data;
       Object.keys(data).forEach(key=> this._proxy(key));
       observer(data);
   }
   $watch(expOrFn, cb) {
       new Watcher(this, expOrFn, cb);
   }
   _proxy(key) {
       Object.defineProperty(this, key, {
           configurable: true,
           enumberable: true,
           get: ()=> this._data[key],
           set: (val) => {
               this._data[key] = val;
           }
       });
   }
}

let demo = new Vue({
   data: {
       'a': {
           'ab': {
               'c': 'C'
           }
       },
       'b': {
           'bb': 'BB'
       },
       'c': 'C'
   }
});

demo.$watch('c', () => console.log('c is changed'))
// get value
demo.c = 'CCC'
// new value seted
// get value
// c is changed
demo.c = 'DDD'
// new value seted
// get value
// c is changed
demo.a
// get value
demo.a.ab = {
   'd': 'D'
}
// get value
// get value
// new value seted
console.log(demo.a.ab)
// get value
// get value
// {get d: (), set d: ()}
demo.a.ab.d = 'DD'
// get value
// get value
// new value seted
console.log(demo.a.ab);
// get value
// get value
// {get d: (), set d: ()}

Vue-数据的双向绑定