Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue

Berechnete Eigenschaften

Manchmal packen wir zu viel Logik in Vorlagen, wodurch die Vorlagen zu schwerfällig und schwierig zu pflegen werden. Zum Beispiel:

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

In diesem Fall müssen wir eine Weile darauf schauen, bevor wir erkennen, dass wir die umgekehrte Zeichenfolge der variablen Nachricht anzeigen möchten. Darüber hinaus wird es problematischer, wenn wir die umgekehrte Zeichenfolge mehrmals in der Vorlage verwenden möchten. Daher sollten wir beim Umgang mit komplexer Logik berechnete Eigenschaften verwenden.

Grundlegende Verwendung

Berechnete Eigenschaften sind Eigenschaften im Vue-Konfigurationsobjekt und werden wie folgt verwendet:

<div id="app">
   <!-- Der Wert des berechneten Attributs kann direkt wie Daten verwendet werden -->
  {{ einigeComputed }}
</div>
const vm = neuer Vue({
  el: '#app',
  berechnet: {
     // Der zurückgegebene Wert ist der Wert des berechneten Attributs someComputed () {
      gib „einige Werte“ zurück
    }
  }
})

Wenn wir beispielsweise die umgekehrte Zeichenfolge einer Zeichenfolge erhalten möchten, können wir dazu die berechnete Eigenschaft verwenden:

<div id="app">
  <p>Ursprüngliche Zeichenfolge: "{{ msg }}"</p>
  <p>Zeichen umkehren: "{{ reversedMsg }}"</p>
</div>
const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo'
  },
  berechnet: {
    umgekehrteMsg: Funktion () {
      gib dies zurück.msg.split('').reverse().join('');
    }
  }
})

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.

Berechnete Eigenschaften vs. Methoden

Tatsächlich können die oben genannten Funktionen auch mit Methoden wie den folgenden erreicht werden:

<div id="app">
  <p>Ursprüngliche Zeichenfolge: "{{ msg }}"</p>
  <p>Zeichenfolge umkehren: "{{ reversedMsg() }}"</p>
</div>
const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo'
  },
  Methoden: {
    umgekehrteMsg: Funktion () {
      gib dies zurück.msg.split('').reverse().join('');
    }
  }
})

Obwohl durch das Aufrufen von Methoden in Ausdrücken derselbe Effekt erzielt werden kann, besteht ein grundlegender Unterschied zwischen der Verwendung berechneter Eigenschaften und der Verwendung von Methoden. Bei der Verwendung von Methoden wird bei jedem erneuten Rendern der Seite die entsprechende Methode einmal erneut ausgeführt, beispielsweise:

<div id="app">
  <p>{{ Name }}</p>
  <p>{{ umgekehrteMsg() }}</p>
</div>
const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo',
    Name: 'shanshan'
  },
  Methoden: {
    umgekehrteMsg: Funktion () {
      console.log('Methode ausgeführt');
      gib dies zurück.msg.split('').reverse().join('');
    }
  }
})
vm.name = "duyi";

Im obigen Beispiel können wir sehen, dass die Seite neu gerendert wird, sobald der Wert von name geändert wird. In diesem Moment wird die Zeichenfolge „Methode ausgeführt“ in der Konsole ausgegeben, was darauf hinweist, dass die Funktion reversedMsg ausgeführt wurde. Wir müssen diese Methode jedoch nicht ausführen, da die geänderten Daten nichts mit dieser Funktion zu tun haben. Wenn die Logik in dieser Funktion sehr komplex ist, wird dies auch zu Leistungseinbußen führen.

Wenn wir jedoch berechnete Eigenschaften verwenden, tritt dieses Phänomen nicht auf, wie zum Beispiel:

const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo',
    Name: 'shanshan'
  },
  berechnet: {
    umgekehrteMsg: Funktion () {
      console.log('Berechnung ausgeführt');
      gib dies zurück.msg.split('').reverse().join('');
    }
  }
})
vm.name = "duyi";

An dieser Stelle ist zu erkennen, dass bei einer Neuvergabe des Datennamens die berechnete Eigenschaft nicht ausgeführt wird. Der wesentlichste Unterschied zwischen berechneten Eigenschaften und Methoden besteht daher darin, dass berechnete Eigenschaften basierend auf reaktionsfähigen Abhängigkeiten zwischengespeichert werden. Der Wert der berechneten Eigenschaft wird immer im Cache gespeichert. Solange sich die Daten, von denen sie abhängt, nicht ändern, gibt jeder Zugriff auf die berechnete Eigenschaft sofort das zwischengespeicherte Ergebnis zurück, anstatt die Funktion erneut auszuführen. Die Methode führt die Funktion immer erneut aus, wenn ein erneutes Rendering ausgelöst wird.

Warum also brauchen wir Caching?

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

Eintauchen in berechnete Eigenschaften

Eine berechnete Eigenschaft kann nicht nur als Funktion, sondern auch als Objekt mit zwei Eigenschaften, Getter und Setter, geschrieben werden. Beide Eigenschaften sind Funktionen. Die Schreibweise lautet wie folgt:

const vm = neuer Vue({
  el: '#app',
  berechnet: {
    vollständiger Name:
      getter () {
         // etwas Code},
      Setter () {
         // etwas Code }
    }
  }
})

Getter Lesen

Zuvor haben wir die berechnete Eigenschaft direkt als Funktion geschrieben, nämlich die Getter-Funktion. Das heißt, berechnete Eigenschaften haben standardmäßig nur Getter. Das This des Getters wird automatisch an die Vue-Instanz gebunden.

Wann soll die Ausführung erfolgen?

Wenn wir eine berechnete Eigenschaft erhalten, wird die Get-Funktion ausgeführt.

const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo'
  },
  berechnet: {
    umgekehrteMsg: {
      getter () {
        gib dies zurück.msg.split('').reverse().join('');
      }
    }
  }
})

Setter-Einstellungen

Optional wird die Set-Funktion ausgeführt, wenn die berechnete Eigenschaft neu zugewiesen wird. Parameter: Der zurückzusetzende Wert. Das „this“ des Setters wird automatisch an die Vue-Instanz gebunden.

const vm = neuer Vue({
  el: '#app',
  Daten: {
    Nachricht: 'Hallo',
    firstStr: ''
  },
  berechnet: {
    umgekehrteMsg: {
      getter () {
        gib dies zurück.msg.split('').reverse().join('');
      },
      Setter (neuerWert) {
        this.firstStr = neuerWert[0];
      }
    }
  }
})

Beachten Sie, dass sich ein Wert, selbst wenn er einer berechneten Eigenschaft zugewiesen wird, nicht ändert. Noch einmal: Die berechnete Eigenschaft wird nur neu berechnet, wenn sich die abhängigen responsiven Eigenschaften ändern.

Übungsname-Filter

personArr: [
  { 
    Name: '', 
    Quelle: '.jpg', 
    des: 'schlechter Halswirbel', 
    Geschlecht: 'm', 
    ID: '056482'
  },
  { 
    Name: '', 
    Quelle: '.jpg', 
    des: 'Wer bin ich', 
    Geschlecht: 'w', 
    ID: '157894'
  },
  { 
    Name: '', 
    src: '.jpg', des: 'Ich sehe sehr gut aus', 
    Geschlecht: 'w', 
    ID: '2849245'
  },
  { 
    Name: '', 
    Quelle: '.jpeg', 
    des: 'Du hast kein fremdes Gesicht gesehen', 
    Geschlecht: 'm', 
    ID: '348515'
  },
  { 
    Name: '', 
    Quelle: '.jpeg', 
    von: 'Guapi Liu', 
    Geschlecht: 'm', 
    ID: '478454'
  }
]

Praxis_Alle Produkte auswählen

Kursliste: [
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 1299,
    Warenkorb: 1,
    ID: 0
  },
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 1148,
    Warenkorb: 1,
    ID: 1595402664708
  },
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 1,
    Warenkorb: 1,
    ID: 1596305473062
  },
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 1,
    Warenkorb: 1,
    ID: 1595413512182
  },
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 12798,
    Warenkorb: 1,
    ID: 1596302161181
  },
  {
    Poster: '.jpg',
    Titel: '',
    Preis: 1,
    Warenkorb: 1,
    ID: 1596300025301,
  },
]

Wissenspunkterweiterung:

Instanzskalierung

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
lass vm1 = neues Vue({
            el:'#app1',
            Daten:{
                mes:'hallo'
            }
        })

        lass vm2 = neues Vue({
            el:'#app2',
            berechnet: {
                reverseMes(){
                    // Verwende die mes im Rechenzentrum der Instanz vm1, um die Zeichenfolge umzukehren return vm1.mes.split('').reverse().join('')
                }
            }
        })

Die Daten in den Instanzen vm1 und vm2 können auch zur Berechnung der Eigenschaften verwendet werden

Zusätzlich zur Verwendung in Interpolationsausdrücken können benutzerdefinierte berechnete Eigenschaften auch in v-bind: Attributbindung verwendet werden, um einige Stiländerungen usw. durchzuführen.

Oben finden Sie eine detaillierte Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue. Weitere Informationen zur Verwendung berechneter Eigenschaften in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!