Detailed interpretation of responsiveness principles in Vuejs

This article mainly introduces the basic knowledge of Vuejs responsiveness principle in code detail. Friends who are interested can refer to it.

Responsive principle

> The model and view in vuejs are synchronized, and the view will be automatically updated when the data is modified. This actually depends on the Object.defineProperty method, so vuejs does not support IE8 and below. 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
> Properties that can currently be described by Object.defineProperty Divided into two types: data attributes and accessor attributes

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

Data attributes> The descriptor of data attributes includes 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 attributes> Access The desciptor of the device attribute includes 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

Vuejs's practice of 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 be achieved through app. _data_text will trigger set, 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 instead of 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;
      }
    })
  });
}

The above is the entire content of this article. If you still have any questions that you don’t understand, you can discuss it in the message area below.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the router cross-module jump problem

##Detailed introduction to high-order components in React

Detailed interpretation of react back-end rendering template

How to implement automatic flash kill clicks on web pages in JS (detailed tutorial)

How to implement web page grabbing red envelopes in Javascript

The above is the detailed content of Detailed interpretation of responsiveness principles in Vuejs. For more information, please follow other related articles on the PHP Chinese website!