vue working mechanism

 

vue working mechanism

Vue Responsive principle defineProperty

 1 class KVue {
 2 constructor(options) {
 3 this._data = options.data;
 4 this.observer(this._data);
 5 }
 6 observer(value) {
 7 if (!value || typeof value !== "object") {
 8 return;
 9 }
10 Object.keys(value).forEach(key => {
11 this.defineReactive(value, key, value[key]);
12 });
13 }
14 defineReactive(obj, key, val) {
15 Object.defineProperty (obj, Key, {
 16 Enumerable: to true  / * Properties enumerable * / ,
 . 17 Configurable: to true  / * attributes may be modified or deleted * / ,
 18 is  GET () {
 . 19  return Val;
 20 is  },
 21 is  SET (newVal) {
 22 is  IF (newVal === Val) return ;
 23 is  the this .CB (newVal);
 24  }
 25  });
 26 is  }
 27  CB (Val) {
 28 the console.log ( "the update data" , Val );
 29  }
 30 }
31 let o = new KVue({
32 data: {
33 test: "I am test."
34 }
35 });
36 o._data.test = "hello,kaikeba";