Un article expliquant en détail comment annuler un abonnement dans Vue

Vue est un framework JavaScript très populaire, particulièrement largement utilisé dans le développement front-end. Vue fournit de nombreuses fonctionnalités pratiques, dont la fonction d'abonnement. L'abonnement est un mécanisme d'événement grâce auquel nous pouvons surveiller les modifications de certaines données dans l'instance Vue. Cependant, nous devons parfois annuler ces abonnements, ce qui nécessite la fonction d'annulation fournie par Vue. Cet article détaillera comment annuler un abonnement Vue.

Bases de l'abonnement

Dans Vue, les abonnements sont mis en œuvre via la surveillance et calculés. watch implémente l'écoute et le rappel d'un attribut de données spécifique, et calculé calcule la valeur d'un attribut en fonction de la valeur d'un ou plusieurs attributs. On peut définir un abonnement via montre et calculé, par exemple :

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
  }
}

Dans le code ci-dessus, nous définissons trois attributs de données, à savoir le nom, l'âge et le nom complet. Dans watch, nous définissons deux fonctions de rappel pour surveiller respectivement les changements de nom et d'âge. Lorsque le nom ou l'âge change, la fonction de rappel modifiera la valeur de fullName. En mode calculé, nous définissons une propriété calculée getFullName pour obtenir le fullName. De cette façon, lorsque l'abonnement prend effet, nous pouvons surveiller les changements de nom et d'âge et obtenir le dernier fullName via getFullName.

Désabonnement

Nous savons maintenant comment nous abonner aux données dans l'instance Vue, mais que devons-nous faire lorsque nous voulons nous désinscrire ?

Vue propose deux méthodes pour se désinscrire : l'une via la fonction renvoyée par la méthode watch et l'autre via l'attribut cache de l'attribut calculé.

Désabonnement via watch

Dans Vue, la méthode watch renverra une fonction. Cette fonction peut être utilisée pour annuler l'auditeur enregistré et implémenter la fonction de désabonnement. Par exemple, nous pouvons transmettre une propriété du composant parent au composant enfant et surveiller le changement de cette propriété dans le composant enfant :

// 父组件
<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>

Dans le code ci-dessus, nous surveillons le changement de la propriété propA via la méthode watch dans le composant enfant. Lorsque le composant parent modifie la propriété propA, la méthode watch du composant enfant sera déclenchée et le rappel correspondant sera exécuté. En parallèle, la méthode watch renvoie une fonction. On peut appeler cette fonction lorsque le composant est détruit pour annuler la surveillance de l'attribut propA et implémenter la fonction de désabonnement :

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

Dans le code ci-dessus, on appelle watch dans le hook créé. de la méthode du sous-composant et enregistrez la fonction renvoyée dans la variable unwatch. Avant que le composant ne soit détruit, nous appelons la fonction unwatch pour annuler la surveillance de l'attribut propA et implémenter la fonction de désabonnement.

Désabonnement via calculé

En plus de se désinscrire via la fonction renvoyée par la méthode watch, nous pouvons également implémenter la fonction de désabonnement via l'attribut cache de l'attribut calculé. Propriétés mises en cache des propriétés calculées Une propriété calculée est une propriété mise en cache lorsque ses dépendances n'ont pas changé. Il améliore les performances des applications en éliminant le besoin de recalculer les propriétés calculées à chaque fois.

Dans Vue, lorsque nous utilisons l'attribut calculé pour calculer la valeur d'une propriété, le compilateur créera une propriété de cache pour cette propriété. Cette propriété mise en cache est une propriété interne et sa valeur est la dernière valeur de la propriété calculée. Nous pouvons annuler l'abonnement à la propriété calculée en accédant à cette propriété mise en cache, réalisant ainsi la fonction de désabonnement. Par exemple :

// 组件
<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>

Dans le code ci-dessus, nous avons défini un composant qui contient une propriété value et une propriété calculée doubleValue. Nous annulons l'abonnement à cette propriété calculée en accédant à la propriété doubleValue pour implémenter la fonction d'annulation.

Conclusion

L'abonnement est une fonction très importante dans Vue, qui peut nous aider à surveiller les modifications des données et à réagir à temps. Dans le même temps, lorsque nous n’avons plus besoin de surveiller les modifications des données, nous pouvons également facilement annuler l’abonnement. Grâce à l'explication ci-dessus, je pense que vous avez compris comment annuler l'abonnement Vue. J'espère que cet article pourra être utile à tout le monde !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!