This time, thoroughly understand bidirectional data binding 01

Pre knowledge required for bidirectional data binding

1. Array of reduce Method

Array of reduce The usage scenario of method is that the initial value of this operation depends on the return value of the last operation , For example, the accumulation of values , Get the value of the object attribute in a chain .

reduce Function takes two parameters ：

• function ( Previous cumulative value , The value of the currently traversed element )
• Initial value

The sum of the previous cumulative value and the current traversal value should be returned in the function body

const arr = [1,2,3,4];

let res = arr.reduce((pre,cur) => {
    
  return pre + cur;
},0)

console.log(res); // 10

adopt reduce Get the value of the object attribute in a chain

const obj = {
    
  name: ' Zhang San ',
  info: {
    
    address: {
    
      location: ' Huairou, Beijing '
    }
  }
}

const arr = ['info','address','location'];
const location = arr.reduce((pre,cur) => pre[cur],obj);
console.log(location);  //  Huairou, Beijing 

2. Publish subscribe mode

Publish subscribe mode mainly includes the following two classes ：

1. Dep class
   • Responsible for dependency collection
   • I have an array , Used to store all subscription information
   • There is a way to add subscriptions to the array
   • Provide a loop , Cycle through each subscription in the array
2. Watcher class
   • Responsible for subscribing to events

Here are the most basic Dep Classes and Watcher class ：

// Dep Class is mainly used to collect subscriptions 
class Dep {
    
  constructor() {
    
    // subs Array , It is used to store the information of all subscribers 
    this.subs = []
  }
  //  towards subs Array , Add subscriber information 
  addSub(watcher) {
    
    this.subs.push(watcher);
  }
  //  Method of issuing notice 
  notify(){
    
    this.subs.forEach(watcher => {
    
      watcher.update();
    })
  }
}

//  Subscriber's class 
class Watcher {
    
  constructor(cb) {
    
    this.cb = cb;
  }
  //  Method of triggering callback 
  update() {
    
    this.cb();
  }
}

const w1 = new Watcher(() => {
    
  console.log(' This is the first subscriber ');
})

const w2 = new Watcher(() => {
    
  console.log(' This is the second subscriber ');
})
const dep = new Dep();
dep.addSub(w1);
dep.addSub(w2);
dep.notify()

Subscribers can be understood as DOM Elements , When the data changes ,Vue Every subscriber will be notified , Then the subscriber updates according to the latest data DOM.

3. Use Object.defineProperty() Data hijacking

1. adopt get() Hijack value operation .
2. adopt set() Hijack assignment operation .

    const obj = {
    
  name: ' Zhang San ',
  age: 20,
  info: {
    
    a: 1,
    b: 2
  }
}

Object.defineProperty(obj,'name',{
    
  enumerable: true,
  configurable: true,
  get() {
    
    console.log(' Someone got obj.name Value ');
    return " What you get is Zhang San here "
  },
  set(newVal) {
    
    console.log(' Print out the new value ');
  }
})

console.log(obj.name);
obj.name = '555';

console.log(obj);