Detailed analysis of Vuejs responsive principle

This time I will bring you a detailed analysis of the Vuejs responsiveness principle. What are the precautions when using the Vuejs responsiveness principle? The following is a practical case, let’s take a look.

Responsive principle

> The model(model) and view(view) in vuejs are synchronized. When the data is modified, the view will be automatically updated. This actually depends on the Object.defineProperty method, so vuejs IE8 and below are not supported. Vuejs monitors data changes by hijacking the getter/setter methods, collects dependencies through getters, and notifies the view to update when the data changes and the setter is executed.

Object.defineProperty

> Object.defineProperty can define or modify the properties of an object
> Currently, the properties that can be described by Object.defineProperty are divided into two types: data properties and accessor properties

// obj: 对象
// prop: 对象中的属性
// descriptor: 对象中的属性的特性
Object.defineProperty(obj,prop,descriptor);

Data attributes > The descriptors of data attributes include four types: value, writable, enumerable, configurable

var person = {
  name: 'json',
  age: 18
}
Object.defineProperty(person, 'name', {
  value: 'John',     // 属性的值，默认为undefined
  writable: false,    // 是否可以重写属性的值，设为false便是只读的
  enumerable: false,   // 是否可枚举（for in或Object.keys)，默认为false
  configurable: true   // 是否可以删除或者重新设定上述配置，默认为false
})
person.name = 'new name';
console.log(person.name); // 'John'
for(key in person) console.log(person[key]);  // 18
Object.defineProperty(person, 'name', {
  writable: true,    
  enumerable: true,   
  configurable: false   
})
person.name = 'new name';
console.log(person.name); // 'new name'
for(key in person) console.log(person[key]);  // 'new name',18

Accessor properties > The desciptors of accessor properties include four types: get, set, enumerable, configurable

var person = { _age: 20 };
Object.defineProperty(person, 'age',{
  get: function(){
    return this._age;
  },
  set: function(age){
    this._age = age < 0 ? 0 : age;
  }
});
person.age = 5;   // _age == 5
person.age = -3;  // _age == 0
person._age = -3;  // _age == -3

The practice of Vuejs hijacking data

function observer(value, cb) {
  // 遍历对象的所有属性并为对象添加对应的访问器属性
  Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}
function defineReactive (obj, key, val, cb) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      /*....依赖收集等....*/
    },
    set:newVal=> {
      cb();/*订阅者收到消息的回调，这里为render函数，即重新渲染*/
    }
  })
}
class Vue {
  constructor(options) {
    this._data = options.data;
    observer(this._data, options.render)  /*把所有数据变成可观察的*/
  }
}
let app = new Vue({
  el: '#app',
  data: {
    text: 'text',
    text2: 'text2'
  },
  render(){
    console.log("render");
  }
})

Residual issues > The above implementation can only trigger set through app._data_text, so how can app.text trigger set?
Agent

> The proxy can be implemented by adding the accessor attribute to this object, and then you can use app.text to replace app._data.text

_proxy(options.data);/*构造函数中*/
/*代理*/
function _proxy (data) {
  const that = this;
  Object.keys(data).forEach(key => {
    Object.defineProperty(that, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return that._data[key];
      },
      set: function proxySetter (val) {
        that._data[key] = val;
      }
    })
  });
}

I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!

Recommended reading:

How nodejs implements WeChat payment

Use nodejs to call the delivery address in WeChat

The above is the detailed content of Detailed analysis of Vuejs responsive principle. For more information, please follow other related articles on the PHP Chinese website!