Detaillierte Analyse des Reaktionsprinzips von Vuejs

Dieses Mal werde ich Ihnen eine detaillierte Analyse des Reaktionsfähigkeitsprinzips von Vuejs geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Reaktionsfähigkeitsprinzips von Vuejs? sehen.

Responsive Prinzip

> Das Modell(Modell) und die Ansicht(Ansicht) in vuejs werden synchronisiert. Wenn die Daten geändert werden, wird die Ansicht automatisch aktualisiert. Dies hängt tatsächlich von der Object.defineProperty-Methode ab. daher werden vuejs IE8 und niedrigere Versionen nicht unterstützt. Vuejs überwacht Datenänderungen, indem es die Getter-/Setter-Methoden kapert, sammelt Abhängigkeiten über Getter und benachrichtigt die Ansicht zur Aktualisierung, wenn sich die Daten ändern und der Setter ausgeführt wird.

Object.defineProperty

> Object.defineProperty kann die Eigenschaften eines Objekts definieren oder ändern
> Derzeit sind die Eigenschaften, die durch Object.defineProperty beschrieben werden können, in zwei Typen unterteilt: Dateneigenschaften und Accessor-Eigenschaften

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

Datenattribute > Die Deskriptoren von Datenattributen umfassen vier Typen: Wert, beschreibbar, aufzählbar, konfigurierbar

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

Zugriffsattribute > Es gibt vier Deskriptoren für Zugriffsattribute: 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

Wie Vuejs Daten kapert

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

Restprobleme > Die obige Implementierung kann nur über app._data_text ausgelöst werden. Wie kann also app.text ausgelöst werden? > Der Proxy kann durch Hinzufügen des Accessor-Attributs zu diesem Objekt implementiert werden. Anschließend können Sie app.text verwenden, um app._data.text zu ersetzen.

Ich glaube, Sie beherrschen die Methode, nachdem Sie das gelesen haben Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Wie NodeJS die WeChat-Zahlung implementiert

Verwenden Sie NodeJS, um die Lieferadresse in WeChat aufzurufen

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Reaktionsprinzips von Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!