Lassen Sie uns über berechnete Eigenschaften in Vue sprechen

1. Berechnetes Attribut berechnet

1.1. Das berechnete Attribut berechnet basiert auf seinem Abhängigkeitscache und wird nur aktualisiert, wenn sich die zugehörigen Abhängigkeiten ändern. In der offiziellen Dokumentation heißt es: Für jede komplexe Logik, die reaktive Daten enthält, sollten Sie berechnete Eigenschaften verwenden. (Lernvideo-Sharing: vue-Video-Tutorial

)

1.2. Verarbeitung komplexer Daten – berechnet

⭐⭐ Das Zusammenfügen von Zeichenfolgen, ob die Punktzahl übergeben wird, und das Aufzeichnen von Nachrichten in einem Textabschnitt wird mithilfe der Berechnung implementiert

<div id="app">
      <!-- 插值语法表达式直接进行拼接 -->
      <!-- 1.拼接姓名 -->
      <h2>{{fullname}}</h2>

      <!-- 2.显示分数及格或不及格 -->
      <h2>{{scorelevel}}</h2>

      <!-- 3.反转单词 -->
      <!-- reverse针对于数组，先用split转为数组，在用reverse -->
      <h2>{{reversetext}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // name
            firstName: "kk",
            lastName: "cc",

            // score
            score: 99,

            // 文本中单词反转
            message: "I love stydy Vue3",
          };
        },
        computed: {
          fullname() {
            return this.firstName + " " + this.lastName;
          },
          scorelevel() {
            return this.score >= 60 ? "及格" : "不及格";
          },
          reversetext() {
            return this.message.split(" ").reverse().join(" ");
          },
        },
      });
      app.mount("#app");

Natürlich können wir auch die Syntax und Methoden der Moustache-Interpolation verwenden, aber für die Verarbeitung komplexer Daten verwenden wir häufig die Berechnungsmethode, die Schreibmethode ist klarer und die berechneten Attribute werden zwischengespeichert

1.3 Cache der berechneten Attribute

⭐⭐

werden basierend auf ihren Abhängigkeiten zwischengespeichert.

Wenn sich die Daten nicht ändern, müssen die berechneten Attribute nicht neu berechnet werden.

Aber wenn sich die abhängigen Daten ändern, werden die berechneten Attribute weiterhin verwendet wenn Sie sie verwenden, Neu berechnen;
• &tinsp;
Aus diesem Grund bevorzugen wir bei der Verarbeitung komplexer Daten die Berechnung.

Bei Verwendung der gleichen Anzahl vollständiger Namen werden Methoden dreimal ausgeführt und einmal berechnet. Dies liegt genau an der Berechnung Berechnungsattribut Wird zwischengespeichert Attribut Attributwert Für Funktionen

Wenn wir den Wert einer berechneten Eigenschaft festlegen möchten, können wir eine Setter-Methode für die berechnete Eigenschaft festlegen

• computed: {
            // 语法糖
            fullname() {
              return this.firstname + " " + this.lastname;
            },
  
            // 完整写法
            fullname: {
              get: function () {
                return this.firstname + " " + this.lastname;
              },
              set: function (value) {
                const names = value.split(" ");
                this.firstname = names[0];
                this.lastname = names[1];
              },
            },

  [Empfohlene verwandte Video-Tutorials:
  Vuejs-Einführungs-Tutorial

  ,
Einführung in die Webfront -Ende

]

Das obige ist der detaillierte Inhalt vonLassen Sie uns über berechnete Eigenschaften in Vue sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!