Vue a une compréhension approfondie des différences et des scénarios d'utilisation entre calculé et montre

Vue a une compréhension approfondie des différences et des scénarios d'utilisation entre calculé et watch

Vue est un framework frontal simple, efficace et flexible. Il possède de nombreuses excellentes fonctionnalités, dont les deux plus importantes sont calculées et watch. . Ces deux fonctionnalités peuvent être utilisées pour gérer les données qui apparaissent souvent dans les applications Vue, mais leur utilisation est complètement différente. Dans cet article, nous approfondirons les différences et les scénarios applicables entre le calcul et la montre, et apporterons aux lecteurs quelques expériences et techniques pratiques.

computed est une propriété calculée de Vue, qui est utilisée pour mettre à jour automatiquement les données lorsque les données changent et peut être mise en cache. Calculé peut être compris comme certaines données qui doivent être traitées dynamiquement. Ces données dépendent du statut d'autres données, comme dans l'exemple suivant :

<template>
  <div>
      <p>商品价格：{{ price }}</p>
      <p>折扣价格：{{ salePrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discount: 0.8
    };
  },
  computed: {
    price() {
      return this.originalPrice;
    },
    salePrice() {
      return this.originalPrice * this.discount;
    }
  }
}
</script>

Dans cet exemple, nous définissons un prix original et un prix réduit, puis utilisons l'attribut calculé respectivement les prix des produits et les prix réduits sont calculés. Le code à l'intérieur de l'attribut calculé s'exécute automatiquement chaque fois que les données changent, elles seront recalculées et les résultats peuvent être mis en cache, évitant ainsi le problème d'efficacité des calculs répétés.

En revanche, watch est une fonctionnalité d'observation de Vue, qui est utilisée pour répondre aux fonctions lorsque les données changent. Watch peut surveiller les changements dans une variable et effectuer certaines opérations spécifiques lorsque la variable change, comme dans l'exemple suivant :

<template>
  <div>
      <input v-model="inputValue" />
      <p>{{ displayValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      displayValue: ""
    };
  },
  watch: {
    inputValue(newValue) {
      this.displayValue = newValue.toUpperCase();
    }
  }
}
</script>

Dans cet exemple, nous définissons une zone de saisie et une étiquette p, qui affichent respectivement les entrées de l'utilisateur et les lettres majuscules saisies par. l'utilisateur. Une fonction de réponse pour la variable inputValue est définie sous l'attribut watch Lorsque la variable inputValue change, nous modifions la valeur de la variable displayValue. A noter que la fonction de réponse watch ne renvoie rien, mais modifie les données de l'instance Vue.

En résumé, la différence entre calculé et surveillé réside dans le fait qu'il s'agisse de calculs passifs ou de traitements réactifs. Calculé doit être utilisé lorsqu'un traitement ou un formatage spécial doit être effectué en fonction de modifications apportées à des données. Lorsque vous devez répondre aux données de manière dynamique et que certaines opérations spécifiques doivent être effectuées, watch doit être utilisé. Enfin, il est important de noter qu'ils sont indépendants les uns des autres, une propriété calculée ne sera pas observée par la montre, et vice versa.

(Les extraits de code de cet article proviennent de la documentation officielle de Vue.)

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!