Analyse détaillée du principe réactif de Vuejs

Cette fois, je vais vous apporter une analyse détaillée du principe de réactivité de Vuejs. Quelles sont les précautions lors de l'utilisation du principe de réactivité de Vuejs. Ce qui suit est un cas pratique, prenons un. regarder.

Principe de réactivité

> Le Model(model) et View(view) dans vuejs sont synchronisés. Lorsque les données sont modifiées, la vue sera automatiquement mise à jour. Cela dépend en fait de la méthode Object.defineProperty. donc vuejs IE8 et versions antérieures ne sont pas pris en charge. Vuejs surveille les modifications des données en détournant les méthodes getter/setter, collecte les dépendances via les getters et informe la vue de la mise à jour lorsque les données changent et que le setter est exécuté.

Object.defineProperty

> Object.defineProperty peut définir ou modifier les propriétés d'un objet
> Actuellement, les propriétés qui peuvent être décrites par Object.defineProperty sont divisées en deux types : les propriétés de données et les propriétés d'accesseur

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

Attributs de données > Les descripteurs d'attributs de données incluent quatre types : valeur, inscriptible, énumérable, 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

Attributs d'accesseur > Il existe quatre descripteurs pour les attributs d'accesseur : 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

Comment Vuejs détourne les données

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");
  }
})

Problèmes résiduels > L'implémentation ci-dessus ne peut être déclenchée que via app._data_text, alors comment app.text peut-il déclencher un
Agent

 ? > Le proxy peut être implémenté en ajoutant l'attribut accesseur à cet objet, puis vous pouvez utiliser app.text pour remplacer 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;
      }
    })
  });
}

Je pense que vous maîtrisez la méthode après avoir lu le Dans le cas de cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment nodejs implémente le paiement WeChat

Utilisez nodejs pour appeler l'adresse de livraison dans WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!