Erfahren Sie in einem Artikel, wie Sie berechnete Eigenschaften in Vue verwenden

Wissen Sie, wann Sie Eigenschaften mit Vue berechnen müssen? Wie verwende ich berechnete Eigenschaften? Der folgende Artikel wird Ihnen helfen, die berechneten Vue-Eigenschaften zu verstehen und die grundlegende Verwendung der berechneten Vue-Eigenschaften vorzustellen. Ich hoffe, er wird Ihnen hilfreich sein.

Berechnete Eigenschaften

Manchmal fügen wir zu viel Logik in die Vorlage ein, was dazu führt, dass die Vorlage übergewichtig und schwer zu pflegen ist. Zum Beispiel:

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

In einer solchen Situation müssen wir es eine Weile betrachten, um zu erkennen, dass es sich hier um die umgedrehte Zeichenfolge handelt, in der wir die variable Nachricht anzeigen möchten. Darüber hinaus möchten wir die umgedrehte Zeichenfolge mehrmals verwenden Die Vorlage wird für uns schwieriger. Wenn wir uns mit komplexer Logik befassen, sollten wir daher berechnete Eigenschaften verwenden. [Verwandte Empfehlungen: „vue.js Tutorial“]

Grundlegende Verwendung

Berechnete Eigenschaften sind Eigenschaften im Vue-Konfigurationsobjekt. Die Verwendung ist wie folgt:

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

Zum Beispiel möchten wir eine Zeichenfolge erhalten Um die Zeichenfolge umzudrehen, können wir dafür berechnete Eigenschaften verwenden:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Wir können sehen, dass der Wert von reversedMsg vom Wert von msg abhängt. Wenn wir also den Wert von msg ändern, ändert sich auch der Wert von reversedMsg entsprechend.

Berechnete Eigenschaften vs. Methoden

Tatsächlich können die oben genannten Funktionen auch mithilfe von Methoden erreicht werden, wie zum Beispiel:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Obwohl auch der Aufruf von Methoden in Ausdrücken den gleichen Effekt erzielen kann, gibt es Unterschiede zwischen der Verwendung berechneter Eigenschaften und Methoden anwenden Wesentlicher Unterschied. Bei der Verwendung von Methoden wird jedes Mal, wenn die Seite neu gerendert wird, die entsprechende Methode erneut ausgeführt, z. B.:

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

Im obigen Beispiel können wir sehen, dass die Seite neu erstellt wird, sobald der Wert von name geändert wird -gerendert, und in diesem Moment gibt die Konsole die Zeichenfolge „Die Methode wird ausgeführt“ aus. Dies bedeutet, dass die Funktion „reversedMsg“ ausgeführt wird. Die Ausführung der Methode ist jedoch nicht erforderlich, da die geänderten Daten damit nichts zu tun haben Wenn die Logik innerhalb dieser Funktion sehr komplex ist, handelt es sich auch um eine Art Verbrauch.

Aber wenn Sie berechnete Attribute verwenden, tritt kein solches Phänomen auf, wie zum Beispiel:

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

Sie können zu diesem Zeitpunkt sehen, dass die berechneten Attribute nicht ausgeführt werden, wenn der Datenname neu zugewiesen wird. Daher besteht der wichtigste Unterschied zwischen berechneten Eigenschaften und Methoden: Berechnete Eigenschaften werden basierend auf reaktionsfähigen Abhängigkeiten zwischengespeichert Der Wert einer berechneten Eigenschaft wird immer im Cache gespeichert, solange sich die Daten, von denen sie abhängt, nicht ändern Bei jedem Zugriff auf die Eigenschaften wird das zwischengespeicherte Ergebnis sofort zurückgegeben, anstatt die Funktion erneut auszuführen. Die Methode besteht darin, jedes Mal ein erneutes Rendern auszulösen. Durch den Aufruf der Methode wird die Funktion immer erneut ausgeführt.

Warum brauchen Sie also Caching?

Angenommen, wir haben ein berechnetes Attribut A, das das Durchlaufen eines riesigen Arrays und die Durchführung umfangreicher Berechnungen erfordert. Dann müssen wir dieses berechnete Attribut A verwenden. Wenn kein Cache vorhanden ist, führen wir die Funktion von A erneut aus, sodass der Leistungsaufwand sehr groß wird.

Eingehende Berechnung von Eigenschaften

Berechnete Eigenschaften können nicht nur als Funktion geschrieben werden, sondern auch als Objekt. Beide Eigenschaften sind Funktionen Folgendes:

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

getter Lesen Nehmen wir

vorne, schreiben wir das berechnete Attribut direkt als Funktion, die die Getter-Funktion ist. Mit anderen Worten: Berechnete Eigenschaften verfügen standardmäßig nur über Getter. Dieser Getter wird automatisch an die Vue-Instanz gebunden.

Wann wird es ausgeführt?

Wenn wir ein berechnetes Attribut erhalten, wird die Get-Funktion ausgeführt.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

Setter-Einstellung

ist optional und die Set-Funktion wird ausgeführt, wenn der berechneten Eigenschaft ein Wert neu zugewiesen wird. Parameter: der zurückzusetzende Wert. Dadurch wird der Setter automatisch an die Vue-Instanz gebunden.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

Bitte beachten Sie, dass sich die berechnete Eigenschaft nicht ändert, auch wenn einer berechneten Eigenschaft ein Wert zugewiesen wird. Auch hier wird die berechnete Eigenschaft nur dann neu berechnet, wenn sich die abhängige reaktive Eigenschaft ändert.

Practice_Name-Filter

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

Practice_Select all products

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonErfahren Sie in einem Artikel, wie Sie berechnete Eigenschaften in Vue verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!