Ein Artikel, der ausführlich erklärt, wie man ein Abonnement in Vue kündigt

Vue ist ein sehr beliebtes JavaScript-Framework, das besonders häufig in der Front-End-Entwicklung verwendet wird. Vue bietet viele praktische Funktionen, darunter die Abonnementfunktion. Das Abonnement ist ein Ereignismechanismus, mit dem wir Änderungen in bestimmten Daten in der Vue-Instanz überwachen können. Manchmal müssen wir diese Abonnements jedoch kündigen, wofür die von Vue bereitgestellte Kündigungsfunktion erforderlich ist. In diesem Artikel erfahren Sie, wie Sie ein Vue-Abonnement kündigen.

Grundlagen zu Abonnements

In Vue werden Abonnements durch Beobachten und Berechnen implementiert. watch implementiert das Abhören und Rückrufen eines bestimmten Datenattributs und berechnet den Wert eines Attributs basierend auf dem Wert eines oder mehrerer Attribute. Wir können ein Abonnement über „watch“ und „computed“ definieren, zum Beispiel:

data() {
  return {
    name: '',
    age: '',
    fullName: '',
  }
},
watch: {
  name: function(newName) {
    this.fullName = 'My name is ' + newName
  },
  age: function(newAge) {
    this.fullName = 'I am ' + newAge + ' years old'
  }
}
computed: {
  getFullName: function() {
    return this.fullName
  }
}

Im obigen Code definieren wir drei Datenattribute, nämlich Name, Alter und vollständiger Name. In watch definieren wir zwei Rückruffunktionen, um Änderungen des Namens bzw. des Alters zu überwachen. Wenn sich der Name oder das Alter ändert, ändert die Rückruffunktion den Wert von fullName. Bei der Berechnung definieren wir eine berechnete Eigenschaft getFullName, um den vollständigen Namen abzurufen. Auf diese Weise können wir beim Inkrafttreten des Abonnements die Namens- und Altersänderungen überwachen und über getFullName den neuesten vollständigen Namen abrufen.

Abmelden

Jetzt wissen wir, wie wir die Daten in der Vue-Instanz abonnieren können, aber was sollen wir tun, wenn wir uns abmelden möchten?

Vue bietet zwei Methoden zum Abbestellen: eine über die von der Watch-Methode zurückgegebene Funktion und die andere über das Cache-Attribut des berechneten Attributs.

Abmelden über Watch

In Vue gibt die Watch-Methode eine Funktion zurück. Diese Funktion kann verwendet werden, um den registrierten Listener abzumelden und die Abmeldefunktion zu implementieren. Beispielsweise können wir eine Eigenschaft von der übergeordneten Komponente an die untergeordnete Komponente übergeben und die Änderung dieser Eigenschaft in der untergeordneten Komponente überwachen:

// 父组件
<template>
  <child-component :propA="propA" />
</template>
<script>
export default {
  data() {
    return {
      propA: '',
    }
  }
}
</script>

// 子组件
<script>
export default {
  props: ['propA'],
  watch: {
    propA(newPropA, oldPropA) {
      // do something
    }
  }
}
</script>

Im obigen Code überwachen wir die Änderung der propA-Eigenschaft durch die Watch-Methode in der untergeordnete Komponente. Wenn die übergeordnete Komponente die propA-Eigenschaft ändert, wird die Überwachungsmethode der untergeordneten Komponente ausgelöst und der entsprechende Rückruf ausgeführt. Gleichzeitig gibt die Watch-Methode eine Funktion zurück, wenn die Komponente zerstört wird, um die Überwachung des propA-Attributs abzubrechen und die Abmeldefunktion zu implementieren:

// 子组件
<script>
export default {
  props: ['propA'],
  data() {
    return {
      unwatch: null
    }
  },
  created() {
    this.unwatch = this.$watch('propA', (newPropA, oldPropA) => {
      // do something
    })
  },
  beforeDestroy() {
    this.unwatch()
  }
}
</script>

Im obigen Code rufen wir watch im erstellten Hook auf der Unterkomponentenmethode und speichern Sie die zurückgegebene Funktion in der Unwatch-Variablen. Bevor die Komponente zerstört wird, rufen wir die Unwatch-Funktion auf, um die Überwachung des propA-Attributs abzubrechen und die Abmeldefunktion zu implementieren.

Abmelden über berechnet

Zusätzlich zum Abbestellen über die von der Überwachungsmethode zurückgegebene Funktion können wir die Abmeldefunktion auch über das Cache-Attribut des berechneten Attributs implementieren. Zwischengespeicherte Eigenschaften berechneter Eigenschaften Eine berechnete Eigenschaft ist eine Eigenschaft, die zwischengespeichert wird, wenn sich ihre Abhängigkeiten nicht geändert haben. Es verbessert die Anwendungsleistung, da die berechneten Eigenschaften nicht jedes Mal neu berechnet werden müssen.

Wenn wir in Vue das berechnete Attribut verwenden, um den Wert einer Eigenschaft zu berechnen, erstellt der Compiler eine Cache-Eigenschaft für diese Eigenschaft. Diese zwischengespeicherte Eigenschaft ist eine interne Eigenschaft und ihr Wert ist der neueste Wert der berechneten Eigenschaft. Wir können das Abonnement der berechneten Eigenschaft kündigen, indem wir auf diese zwischengespeicherte Eigenschaft zugreifen und so die Abmeldefunktion erreichen. Zum Beispiel:

// 组件
<template>
  <div>
    <p>Value: {{ value }}</p>
    <button @click="stopSubscribe">Stop subscribe</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 0,
    }
  },
  computed: {
    doubleValue() {
      return this.value * 2
    }
  },
  methods: {
    stopSubscribe() {
      this.doubleValue
    }
  }
}
</script>

Im obigen Code haben wir eine Komponente definiert, die eine Value-Eigenschaft und eine berechnete DoubleValue-Eigenschaft enthält. Wir kündigen das Abonnement dieser berechneten Eigenschaft, indem wir auf die Eigenschaft doubleValue zugreifen, um die Kündigungsfunktion zu implementieren.

Fazit

Das Abonnement ist eine sehr wichtige Funktion in Vue, die uns helfen kann, Datenänderungen zu überwachen und rechtzeitig zu reagieren. Wenn wir Datenänderungen nicht mehr überwachen müssen, können wir gleichzeitig das Abonnement auch problemlos kündigen. Durch die obige Erklärung glaube ich, dass Sie verstanden haben, wie Sie das Vue-Abonnement kündigen können. Ich hoffe, dieser Artikel kann für alle hilfreich sein!

Das obige ist der detaillierte Inhalt vonEin Artikel, der ausführlich erklärt, wie man ein Abonnement in Vue kündigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!