Vue-Daten können keine Problemanalyse mit Pfeilfunktionen verwenden

Dieser Artikel stellt hauptsächlich das Problem vor, dass Pfeilfunktionen nicht in Vue-Daten verwendet werden können. Dieser Artikel führt Sie ausführlich durch die Quellcode-Analyse ein und hat einen bestimmten Referenzwert 🎜>Zuallererst ist es notwendig. Klar,

a() {}和 b: () => {}

 let obj = {
   a() {},
   // 相当于
   a:function() {},
   b: () => {}
}

Beachten Sie, dass dies nur für den Design-Kerncode gilt

Dieser Code ist auch das UMD-Implementierungsprinzip. Dieser Artikel steht nicht im Mittelpunkt.

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
    console.log(this) //*undefined*
  })))

Analyse 1:

Für Javascript haben Funktionen im nicht-strikten Modus einen solchen Zeiger. Ich weiß nicht, ob er vorhanden ist ist eine Übertragung hier Tür Dies zeigt auf verwandte

Lassen Sie uns über das in diesem Artikel enthaltene Zeigeproblem sprechen. Wenn es sich nicht um einen strikten Modus handelt, sollte dies auf das Fenster zeigen, aber da der Vue-Autor den strikten Modus verwendet, ist er zeigt auf undefiniert

Das Folgende ist das Implementierungsprinzip von Daten in Vue

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()  
  })))

Das heißt, jedes Mal, wenn eine neue Instanz erstellt wird , wird beurteilt, ob eine Datenfunktion vorhanden ist. Wenn ja, wird sie vm._data zugewiesen. Sorgfältige Schüler werden feststellen, dass es keine Daten für Vmm-Instanzen gibt, aber vm._data

es5-Funktion es6-Pfeilfunktion

 var obj = {
   a: () => {
   'use strict';
    console.log(this,'a')
   },
   b() {
    console.log(this,'b')
   },
   c() {
    // window
    let e = () => {
     console.log(this,'e')
    }
    return e
   }
  }
  obj.a() // window
  obj.b() // obj
  obj.c()() // obj

Bei gewöhnlichen Funktionen (im nicht strengen Modus) zeigt dies auf den Aufrufer, und dies zeigt in es6 auf den Kontext zu diesem Zeitpunkt der Erklärung.

Kombiniert die beiden oben genannten Punkte, um das heutige Problem zu analysieren

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   let vm = {}
   var data = () => {
    console.log(this);//undefined
    return {
     a: 1
    }    
   }
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()
   console.log(vm);
  })))

Der obige Code zeigt, dass Sie die Pfeilfunktion verwenden, um Daten anzugeben: () => {} Wenn dies auf undefiniert zeigt, wird es vm._data zugewiesen, entspricht jedoch einem globalen Datum. Solange Sie die Seite nicht aktualisieren, werden Ihre Daten zwischengespeichert.

Wenn wir

data() {}thisDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonVue-Daten können keine Problemanalyse mit Pfeilfunktionen verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!