Interprétation détaillée des principes de réactivité dans Vuejs

Cet article présente principalement les connaissances de base du principe de réactivité de Vuejs dans le détail du code. Les amis intéressés peuvent s'y référer.

Principe réactif

> Le modèle et la vue dans vuejs sont synchronisés, et la vue sera automatiquement mise à jour lorsque les données sont modifiées. Cela dépend en fait de l'objet. .defineProperty, donc vuejs ne prend pas en charge IE8 et versions antérieures, 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
> Divisé en deux types : attributs de données et attributs d'accesseur

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

attributs de données> Les descripteurs d'attributs de données comprennent 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

Pratique de détournement de données de Vuejs

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 être défini
Agent

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

Ce qui précède est l'intégralité du contenu de cet article. Si vous ne comprenez toujours rien, vous pouvez laisser un message ci-dessous.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment résoudre le problème de saut entre modules du routeur

Introduction détaillée aux composants d'ordre élevé dans React

Interprétation détaillée du modèle de rendu back-end React

Comment implémenter des clics Flash Kill automatiques sur les pages Web en JS (tutoriel détaillé)

Comment récupérer des enveloppes rouges sur des pages Web en Javascript

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!