Detaillierte Interpretation der Reaktionsfähigkeitsprinzipien in Vuejs

In diesem Artikel werden hauptsächlich die Grundkenntnisse des Vuejs-Reaktionsprinzips im Detail vorgestellt. Interessierte Freunde können darauf zurückgreifen.

Responsive-Prinzip

> Das Modell und die Ansicht in vuejs werden automatisch aktualisiert, wenn die Daten geändert werden. Dies hängt tatsächlich vom Objekt ab .defineProperty-Methode, daher unterstützt vuejs IE8 und niedriger nicht. vuejs überwacht Datenänderungen durch Kapern der Getter-/Setter-Methoden, 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
> In zwei Typen unterteilt: Datenattribute und Zugriffsattribute

// 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> Zugriff Der Deskriptor von Das Geräteattribut umfasst vier Typen: 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

Die Praxis der Datenentführung durch 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");
  }
})

Restprobleme> Die obige Implementierung kann nur erreicht werden über die app. _data_text wird der Trigger gesetzt. Wie kann der
Proxy

> implementiert werden? hat 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;
      }
    })
  });
}

ersetzt. Das Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie immer noch nichts verstehen, können Sie es im Nachrichtenbereich unten besprechen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lösen Sie das Router-Cross-Modul-Jump-Problem

Detaillierte Einführung in Komponenten höherer Ordnung in React

Detaillierte Interpretation der React-Back-End-Rendering-Vorlage

So implementieren Sie automatische Flash-Kill-Klicks auf Webseiten in JS (ausführliches Tutorial)

Wie man rote Umschläge auf Webseiten in Javascript erkennt

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation der Reaktionsfähigkeitsprinzipien in Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!