Was sind die Unterschiede zwischen den von Vue berechneten Eigenschaften und den Uhren?

Unterschiede: 1. Berechnete Attribute müssen beim Aufruf in der Vorlage gerendert werden, und die Metadaten, von denen die Berechnung abhängt, werden beim Aufruf geändert. 2. Berechnete Attribute verwenden standardmäßig eine tiefe Abhängigkeit und Uhren verwenden standardmäßig eine oberflächliche Beobachtung. 3. Berechnete Attribute eignen sich zum Filtern und können nicht asynchron sein. Die Überwachung eignet sich für asynchrone oder teure Vorgänge. Berechnete Eigenschaften werden der Vue-Instanz hinzugefügt. Der Kontext aller Getter und Setter

wird durch die berechneten Eigenschaften automatisch an die Vue-Instanz gebunden

Kein Aufruf erforderlich

Kann direkt im DOM verwendet werden

Einfaches Beispiel

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Ergebnis:

I bin ursprünglicher Wert: „Hallo“

Ich bin der Wert des berechneten Attributs: „olleH“Wenn Sie keine berechneten Attribute verwenden, dann wird message.split('').reverse().join('') sein Wenn Sie dann zu viel deklarative Logik in die Vorlage schreiben, wird die Vorlage selbst überlastet, insbesondere wenn eine große Anzahl komplexer logischer Ausdrücke zur Verarbeitung von Daten auf der Seite verwendet wird.

Dies hat große Auswirkungen auf die Wartbarkeit der Seite

Und wenn die Abhängigkeit des berechneten Attributs unverändert bleibt, wird es zu einem Cache und der berechnete Wert wird nicht neu berechnet

Wenn die Daten also eine komplexe Logik durchlaufen müssen, um das Ergebnis zu erhalten , dann wird empfohlen, das berechnete Attribut zu verwenden

watch

ist ein Objekt, der Schlüssel sind die den Daten entsprechenden Daten und der Wert ist die entsprechende Rückruffunktion. Der Wert kann auch ein Methodenname oder ein Objekt sein, das Optionen enthält. Wenn sich die Daten ändern, erfolgt ein Rückruf. Er verfügt über zwei Parameter, einen val (geänderte Datendaten) und einen oldVal (ursprüngliche Datendaten). Die Vue-Instanz wird bei der Instanziierung aufgerufen

und durchläuft jede Eigenschaft des Überwachungsobjekts. Einfaches Beispiel erbt seine übergeordnete Funktion, aber seine übergeordnete Funktion ist Fenster, wodurch die Pfeilfunktion auf das Fenster statt auf die Vue-Instanz zeigt. Deep steuert, ob die Eigenschaftsänderungen in diesem Objekt sofort angezeigt werden sollen Steuert, ob diese Funktion beim ersten Rendering ausgeführt werden soll. Die Verwendung ähnelt dem Watch-Callback Der Unterschied zwischen berechneten Vue-Eigenschaften und Watch

Berechnete Eigenschaften vs. Eigenschaftserkennung

Berechnete Eigenschaften (berechnet)

$watch()Eigenschaftserkennung (Überwachung) )

Laufen Sie als Erster ZeitNicht zum ersten Mal ausführen

• Sie müssen beim Aufrufen die Vorlage rendern und die Metadaten ändern, von denen die Berechnung abhängt.
Sie müssen beim Aufruf nur die Metadaten ändern.
Standardmäßige tiefe Abhängigkeit

Die standardmäßige flache Beobachtung

eignet sich zum Filtern, nicht asynchron
• geeignet für asynchrone oder teure Vorgänge

Wenn Daten komplexe Berechnungen durchlaufen müssen, verwenden Sie berechnet Verwandte Empfehlungen: Programmierlehre

Wenn Daten überwacht werden müssen und Verwenden Sie Watch, um einige Operationen an Daten durchzuführen.

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten). Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

! !

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen den von Vue berechneten Eigenschaften und den Uhren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!