Detaillierte Erklärung, warum Daten in Vue-Komponenten nur Funktionen zurückgeben können

Die meisten der verschiedenen Optionen, die über den Vue-Konstruktor übergeben werden, können in der Komponente verwendet werden. Nur die Datenoption unterscheidet sich. Im Vue-Konstruktor geben Daten ein Objekt zurück, aber eine Funktion muss in der Komponente zurückgegeben werden. Warum? In diesem Artikel wird hauptsächlich vorgestellt und ausführlich erläutert, warum die Daten in der Vue-Komponente nur Funktionen zurückgeben können. Der Herausgeber hält dies für recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz angeben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Schauen wir uns zunächst das folgende Beispiel an:

HTML:<p id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter></p>JS:var data = { counter: 0 }
Vue.component(&#39;simple-counter&#39;, {
  template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例的却引用了同一个data对象
  data : data})new Vue({
  el: &#39;#example-2&#39;})

这段代码本来的想法是，点击某个按钮然后那个按钮的值加一，但是因为所有按钮都使用同一个counter值，导致每次点击一个按钮，其他按钮的只也会加一，这是不允许的，每个组件模板不应该相互影响。
那么如何解决这个问题呢？

我们可以通过为每个组件返回全新的 data 对象来解决这个问题，例如：

data: function () {
  return {
    counter: 0
  }
}

那这个其中原理是什么？

这个其实不关Vue的事情，这是js本身的一种特性造成的。当两个实例继承同一个对象的时候么当你修改其中一个属性的时候，另外一个实例也会跟着改。例如：

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}var component1 = new MyComponent()var component2 = new MyComponent()

component1.data.a === component2.data.a // truecomponent1.data.b = 5component2.data.b // 5

Dies wird durch die js bestimmt Für diejenigen, die es nicht verstehen, können Sie meinen anderen Artikel über js-Vererbung lesen

Zusammenfassung:
Tatsächlich ist die ES5-Vererbung sehr ekelhaft, daher hat ES6 die Vererbung verbessert und die Konzepte „Klasse“, „Erweitert“ und „Super“ eingeführt. Wenn Sie mehr darüber erfahren möchten, erfahren Sie mehr darüber Empfehlungen:

Warum die Daten von Vue eine Funktion sind

Der Grund, warum Daten in Vue Komponente muss als Funktion geschrieben werden

Daten in Vue müssen eine Funktion sein

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, warum Daten in Vue-Komponenten nur Funktionen zurückgeben können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!