In-depth understanding of vue.js responsiveness principles

This article brings you an in-depth understanding of the responsiveness principle of vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

I have been exposed to angularjs a long time ago. At that time, I already understood that angularjs implements data monitoring and page update rendering through dirty checking. After that, I came into contact with vue.js. At that time, I was very curious about how vue.js monitors data updates and re-renders the page. Today, we will analyze the principle of vue.js responsiveness step by step, and implement a simple demo.

First, let us understand some basic knowledge.

Basic knowledge

Object.defineProperty

es5 has added the Object.defineProperty API, which allows us to set getters and setters for object properties. ,Thus we can hijack the user's value acquisition and assignment of object attributes. For example, the following code:

const obj = {
};

let val = 'cjg';                      //前端全栈学习交流群:866109386                  
Object.defineProperty(obj, 'name', { //面向想从事前端开发1到5年及以上工作经验的开发人员
  get() {                           // 帮助突破技术瓶颈，提升思维，欢迎大家进群交流。
    console.log('劫持了你的取值操作啦');
    return val;
  },
  set(newVal) {
    console.log('劫持了你的赋值操作啦');
    val = newVal;
  }
});
console.log(obj.name);
obj.name = 'cwc';
console.log(obj.name);

We hijacked the value acquisition and assignment operations of obj[name] through Object.defineProperty, so we can do some tricks here, for example, we can use obj[name] Triggers the update page operation when assigned.

Publish-Subscribe Pattern

The publish-subscribe pattern is one of the more common design patterns, in which there are two roles: publisher and subscriber. Multiple subscribers can subscribe to an event from the same publisher. When the event occurs, the publisher notifies all subscribers who subscribed to the event. Let’s look at an example to understand.

class Dep {             //前端全栈学习交流群:866109386                  
  constructor() {     //面向想从事前端开发1到5年及以上工作经验的开发人员
    this.subs = [];  // 帮助突破技术瓶颈，提升思维，欢迎大家进群交流。
  }
  // 增加订阅者
  addSub(sub) {
    if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
    }
  }
  // 通知订阅者
  notify() {
    this.subs.forEach((sub) => {
      sub.update();
    })
  }
}

const dep = new Dep();

const sub = {
  update() {
    console.log('sub1 update')
  }
}

const sub1 = {
  update() {
    console.log('sub2 update');
  }
}

dep.addSub(sub);
dep.addSub(sub1);
dep.notify(); // 通知订阅者事件发生，触发他们的更新函数

Hands-on practice

After we understand Object.defineProperty and the publish-subscriber model, it is not difficult for us to think that vue.js is implemented based on the above two Data monitoring.

vue.js first uses Object.defineProperty to hijack the getters and setters of the data to be monitored. When the properties of the data are assigned/taken values, vue.js can detect it and handle it accordingly. .

Through the subscription publishing model, we can create a publisher for each property of the object. When other subscribers depend on this property, the subscriber will be added to the publisher's queue. Using the data hijacking of Object.defineProperty, when the property's setter is called, the publisher of the property notifies all subscribers of the updated content.

Next, let’s implement it (see the comments for details):

class Observer {
  constructor(data) {
    // 如果不是对象，则返回
    if (!data || typeof data !== 'object') {
      return;
    }
    this.data = data;
    this.walk();
  }

  // 对传入的数据进行数据劫持
  walk() {
    for (let key in this.data) {
      this.defineReactive(this.data, key, this.data[key]);
    }
  }
  // 创建当前属性的一个发布实例，使用Object.defineProperty来对当前属性进行数据劫持。
  defineReactive(obj, key, val) {
    // 创建当前属性的发布者
    const dep = new Dep();
    /*
    * 递归对子属性的值进行数据劫持，比如说对以下数据
    * let data = {
    *   name: 'cjg',
    *   obj: {
    *     name: 'zht',//前端全栈学习交流群:866109386                  
    *     age: 22,  //面向想从事前端开发1到5年及以上工作经验的开发人员
    *     obj: {  // 帮助突破技术瓶颈，提升思维，欢迎大家进群交流。
    *       name: 'cjg',
    *       age: 22,
    *     }
    *   },
    * };
    * 我们先对data最外层的name和obj进行数据劫持，之后再对obj对象的子属性obj.name,obj.age, obj.obj进行数据劫持，层层递归下去，直到所有的数据都完成了数据劫持工作。
    */
    new Observer(val);
    Object.defineProperty(obj, key, {
      get() {
        // 若当前有对该属性的依赖项，则将其加入到发布者的订阅者队列里
        if (Dep.target) {
          dep.addSub(Dep.target);
        }
        return val;
      },
      set(newVal) {
        if (val === newVal) {
          return;
        }
        val = newVal;
        new Observer(newVal);
        dep.notify();
      }
    })
  }
}

// 发布者,将依赖该属性的watcher都加入subs数组，当该属性改变的时候，则调用所有依赖该属性的watcher的更新函数，触发更新。
class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
    }
  }

  notify() {
    this.subs.forEach((sub) => {
      sub.update();
    })
  }
}

Dep.target = null;

// 观察者
class Watcher {
  /**
   *Creates an instance of Watcher.
   * @param {*} vm
   * @param {*} keys
   * @param {*} updateCb
   * @memberof Watcher
   */
  constructor(vm, keys, updateCb) {
    this.vm = vm;
    this.keys = keys;
    this.updateCb = updateCb;
    this.value = null;
    this.get();
  }

  // 根据vm和keys获取到最新的观察值
  get() {
    Dep.target = this;
    const keys = this.keys.split('.');
    let value = this.vm;
    keys.forEach(_key => {
      value = value[_key];
    });
    this.value = value;
    Dep.target = null;
    return this.value;
  }

  update() {
    const oldValue = this.value;   // 前端全栈学习交流群:866109386
    const newValue = this.get();  // 面向想从事前端开发1到5年及以上工作经验的开发人员
    if (oldValue !== newValue) { // 帮助突破技术瓶颈，提升思维，欢迎大家进群交流。
      this.updateCb(oldValue, newValue);
    }
  }
}

let data = {
  name: 'cjg',
  obj: {
    name: 'zht',
  },
};

new Observer(data);
// 监听data对象的name属性，当data.name发现变化的时候，触发cb函数
new Watcher(data, 'name', (oldValue, newValue) => {
  console.log(oldValue, newValue);
})

data.name = 'zht';

// 监听data对象的obj.name属性，当data.obj.name发现变化的时候，触发cb函数
new Watcher(data, 'obj.name', (oldValue, newValue) => {
  console.log(oldValue, newValue);
})

data.obj.name = 'cwc';
data.obj.name = 'dmh';

Conclusion

In this way, a simple reactive data monitoring is completed. Of course, this is just a simple demo to illustrate the responsiveness principle of vue.js. The real vue.js source code will be more complicated because a lot of other logic is added. ###

The above is the detailed content of In-depth understanding of vue.js responsiveness principles. For more information, please follow other related articles on the PHP Chinese website!