Welche Methoden gibt es zum Initialisieren von Daten in Vue?

Vue bietet zwei Möglichkeiten, Daten zu initialisieren: 1. Objektmethode, Syntax „var data = { Schlüssel-Wert-Paar }“ 2. Funktionsmodus, Syntax „data: function () {return { Schlüssel-Wert-Paar }}“ . Es ist zu beachten, dass die Dateninitialisierung in Komponenten und Erweiterungen kein Objekt sein kann, da sonst ein Fehler gemeldet wird. Der Zweck der Verwendung des Funktionsmodus für Daten in Komponenten besteht darin, zu verhindern, dass mehrere Komponenteninstanzobjekte dieselben Daten gemeinsam nutzen und eine Datenverschmutzung verursachen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Vue-Daten verfügen über zwei Initialisierungsmethoden, Funktion und Objekt, aber welche Szenarien sind für diese beiden Situationen anwendbar? Kann es universell sein? Lassen Sie uns diese beiden Fragen gemeinsam analysieren. Dateninitialisierung offizielle Website-Demo Es wird betont, dass das Objekt nicht für die Dateninitialisierung in Extend verwendet werden kann. Warum also?

Quellcode-Analyse

Laut der offiziellen Website-Demo kann die Dateninitialisierung in Vue.extend kein Objekt sein. Was passiert, wenn wir das Schreiben als Objekt erzwingen?

// 代码来源于官网示例

// 第一种定义方式
var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
// 第二种定义方式
  data: function () {
    return { a: 1 }
  }
})

Nach dem Ausführen meldet die Chrome-Konsole direkt einen Fehler. Die Informationen lauten wie folgt:

• var Component = Vue.extend({
    data: { a: 1 }
  })

  Durch die Analyse des Quellcodes und der Fehlermeldung führt Vue.extend beim Auslösen einen Zusammenführungsvorgang durch und kombiniert eine grundlegende Komponente (innerhalb). vmode, Übersetzung usw.) mit Die von Ihnen in Extend definierten Informationen werden über mergeField in Optionen zusammengeführt. Beim Zusammenführen in Daten wird strats.data ausgelöst, das prüft, ob es sich bei den Daten um eine Funktion handelt Hier finden Sie Filter, Komponenten usw. Die Daten folgen zwei Sätzen von Zusammenführungsprozessen. Weitere Informationen finden Sie in den folgenden Codekommentaren:

  vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

• Andere Situationen: Tatsächlich handelt es sich bei unserem obigen Code nur um einen einfachen Prozess In der tatsächlichen Entwicklung gibt es ähnliche Situationen: Innerhalb von Unterkomponenten können Daten nicht als Objekt in der Route definiert werden, da sie alle unten die Methode mergeOptions aufrufen. Wann kann sie als Objekt definiert werden? ist die Bedeutung von

  // vue.extend 源码地址https://github.com/vuejs/vue/blob/dev/src/core/global-api/extend.js
  
    Vue.extend = function (extendOptions: Object): Function {
    ...
    // 在这里会触发mergeOptions方法
    Sub.options = mergeOptions(
        Super.options,
        extendOptions
      )
    ...
  }
  
  // mergeOptions 源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js
  
  export function mergeOptions (
    parent: Object,
    child: Object,
    vm?: Component
  ): Object {
    ...
  
    const options = {}
    let key
    // parent对象内包含components、filter,、directive
    for (key in parent) {
      mergeField(key)
    }
    // child对象内对应的是Vue.extend内定义的参数
    for (key in child) {
      if (!hasOwn(parent, key)) {
        mergeField(key)
      }
    }
    function mergeField (key) {
    // 这一步是根据传入的key找到不同的合并策略filter、components、directives用到合并策略是这个方法mergeAssets和data用到的不一样，当合并到data的时候会进入专属的合并策略方法内
      const strat = strats[key] || defaultStrat
      options[key] = strat(parent[key], child[key], vm, key)
    }
  }
  
  // strats.data  源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js
  strats.data = function (
    parentVal,
    childVal,
    vm
  ) {
    if (!vm) {
    // 如果data不是function的话会直接走下面的报错信息
      if (childVal && typeof childVal !== 'function') {
        process.env.NODE_ENV !== 'production' && warn(
          'The "data" option should be a function ' +
          'that returns a per-instance value in component ' +
          'definitions.',
          vm
        );
  
        return parentVal
      }
      return mergeDataOrFn(parentVal, childVal)
    }
  
    return mergeDataOrFn(parentVal, childVal, vm)
  };

ok, oben wurde schon so viel gesagt, welchen Sinn hat es also, das zu tun? Warum können diese Situationen nicht als Objekte definiert werden? Um diese Frage zu beantworten, müssen Sie auf JS selbst zurückgreifen. Wie wir alle wissen, sind JS-Datentypen in Referenz- und Basistypen unterteilt Hier erklärt

new Vue({
  data: {
    linke: '//sinker.club'
  }
})

Der obige Code spiegelt ein Problem wider, da sowohl obj3 als auch obj2 auf eine Adresse im Speicher verweisen, sodass sich die Änderung von obj2 auf obj3 auswirkt. Natürlich kann Deep Copy verwendet werden, um dieses Problem zu lösen

JSON.parse(JSON.stringify(obj))

deepClone(obj)

Diese beiden Methoden erfordern jedoch jedes Mal eine Entwicklung oder eine tiefe Kopie des Frameworks Leistungsfreundlich. Wie macht Vue das? Definieren Sie Daten als Funktion

  var obj = {link: '//www.sinker.club'}
  var obj2 = obj
  var obj3 = obj
  obj2.link = "//gitlab.sinker.club"
  console.log(obj3.link) // "//gitlab.sinker.club"

Warum machen Sie das? Was ist das Lösungsszenario?

Wenn ich beispielsweise eine Unterkomponente definiere, werden die Daten als Objekt definiert. Auf diese Komponente wird an mehreren Stellen verwiesen. Wenn einer der Daten, die auf diese Komponente verweisen, geändert wird, führt dies dazu, dass die anderen Daten, die auf diese Komponente verweisen, geändert werden gleichzeitig geändert werden. Ändern, beenden.

Erweitertes Wissen:

Bei der Definition der Vue-Instanz kann das Datenattribut entweder ein Objekt oder eine Funktion sein

function data() {
  return {
   link: '//sinker.club'
  }
}

var obj = test()
var obj2 = test()

obj2.link ="//gitlab.sinker.club"
console.log(obj.link) '//sinker.club'

Das in der Komponente definierte Datenattribut nur eine Funktion sein Um die Wiederverwendung von Daten zu verhindern, definieren Sie sie als Funktion.

Die Daten in der Vue-Komponente sollten voneinander isoliert sein und sich nicht gegenseitig beeinflussen. Bei jeder Wiederverwendung der Komponente sollten die Datendaten einmal kopiert werden Wenn die Komponente kopiert wird, sind die Daten anderer wiederverwendeter lokaler Komponenten nicht betroffen. Daher müssen Sie über die Datenfunktion ein Objekt als Status der Komponente zurückgeben.

• Wenn wir die Daten in die Komponente als Funktion schreiben, werden die Daten in Form eines Funktionsrückgabewerts definiert, sodass bei jeder Wiederverwendung der Komponente neue Daten mit einem eigenen Gültigkeitsbereich zurückgegeben werden, ähnlich wie bei Durch Angabe jeder Komponenteninstanz wird ein privater Datenraum erstellt, sodass jede Komponenteninstanz ihre eigenen Daten verwalten kann.

• Wenn das Datum unserer Komponente einfach in Objektform geschrieben wird, verwenden diese Instanzen denselben Konstruktor. Aufgrund der Eigenschaften von JavaScript teilen alle Komponenteninstanzen dieselben Daten, was zu einer Änderung und allen Änderungen führt.

【Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Initialisieren von Daten in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!