La différence et les scénarios d'application entre calculé et regardé dans Vue

Computed et watch sont deux attributs couramment utilisés dans Vue, et leurs fonctions et scénarios d'application sont différents. Dans cet article, nous présenterons en détail la différence entre calculé et surveillé et fournirons des exemples de code spécifiques.

1.computé

computed est une propriété calculée de Vue, qui est utilisée pour traiter les données et dériver de nouvelles propriétés. La propriété calculée est mise en cache en fonction de ses dépendances et calculée ne sera recalculée que lorsque les dépendances pertinentes changeront.

Dans une instance Vue, nous pouvons définir des propriétés calculées via l'option calculée. Voici un exemple :

new Vue({
  data: {
    num1: 2,
    num2: 3
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  }
})

Dans le code ci-dessus, nous définissons deux données num1 et num2, et calculons leur somme via l'attribut de calcul de somme.

Lorsque l'attribut calculé est utilisé, il peut être utilisé directement dans le modèle, et Vue suivra automatiquement ses dépendances. Lorsque les dépendances changent, le calcul sera recalculé. Cela nous permet d'utiliser les propriétés calculées directement dans les modèles sans avoir à les mettre à jour manuellement.

<div>num1: {{ num1 }}</div>
<div>num2: {{ num2 }}</div>
<div>sum: {{ sum }}</div>

Lorsque num1 ou num2 change, la somme des attributs calculée sera automatiquement recalculée.

L'attribut calculé convient aux scénarios dans lesquels des calculs complexes ou un traitement de données sont effectués sur des données. Il fournit un moyen concis et efficace de dériver de nouvelles propriétés.

2. watch

watch est une propriété de l'instance Vue, qui est utilisée pour surveiller les modifications des données et effectuer les opérations correspondantes. L'attribut watch est généralement utilisé dans des scénarios dans lesquels des opérations asynchrones et des jugements logiques complexes doivent être effectués lorsque les données changent.

De même, dans l'instance Vue, nous pouvons définir l'attribut d'écoute via l'option watch. Voici un exemple :

new Vue({
  data: {
    num1: 2,
    num2: 3,
    sum: 0
  },
  watch: {
    num1: function(newVal, oldVal) {
      this.sum = newVal + this.num2;
    },
    num2: function(newVal, oldVal) {
      this.sum = this.num1 + newVal;
    }
  }
})

Dans le code ci-dessus, nous définissons deux données num1 et num2, surveillons leurs modifications via l'option watch et mettons à jour l'attribut sum lorsqu'elles changent.

Lorsque vous utilisez l'attribut watch, vous devez définir l'attribut d'écoute et spécifier une fonction de rappel. Lorsque la propriété surveillée change, la fonction de rappel sera déclenchée et transmettra la nouvelle valeur et l'ancienne valeur en tant que paramètres.

L'attribut watch convient aux scénarios dans lesquels des opérations spécifiques doivent être effectuées sur des modifications de données. Il peut surveiller les modifications de plusieurs propriétés et exécuter la logique correspondante lorsqu'elles changent.

3. La différence et les scénarios d'application entre calculé et watch

Pour résumer, l'attribut calculé convient aux scénarios dans lesquels des calculs complexes ou un traitement de données sont effectués sur les données. Il peut dériver de nouveaux attributs de manière concise et uniquement lorsque les dépendances associées changent. il est temps de recalculer.

L'attribut watch est plus adapté aux scénarios dans lesquels des opérations asynchrones et des jugements logiques complexes doivent être effectués lorsque les données changent. Il peut surveiller les modifications de plusieurs attributs et exécuter la logique correspondante lorsqu'elles changent.

Enfin, nous devons choisir entre calculé et surveillé en fonction des besoins spécifiques de l'entreprise. Dans le développement réel, nous pouvons choisir les attributs appropriés en fonction de la complexité des exigences et des considérations de performances.

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!