Conseils d'utilisation de Computed et Watch pour implémenter le calcul et la surveillance des données dans Vue

Vue.js est un framework frontal JavaScript populaire qui fournit de riches fonctionnalités de liaison de données et réactives, nous permettant de gérer facilement l'état des applications Web. Parmi eux, Computed et Watch sont deux outils importants de traitement et de surveillance des données dans Vue.js. Cet article expliquera comment les utiliser pour mettre en œuvre des techniques de calcul et de surveillance des données.

1.calculé

calculé Une propriété calculée est une propriété qui dépend de la valeur d'autres propriétés, c'est-à-dire que lorsque les valeurs d'autres propriétés changent, la propriété calculée sera automatiquement recalculée. Les propriétés calculées ont deux fonctions principales :

• Utilisé pour calculer de nouvelles données, telles que l'affichage du nombre total d'éléments de liste ou le tri des données de la liste.
• Traiter les données existantes, telles que le formatage de la date ou du montant, etc.

1.1 Calcul de nouvelles données

Nous pouvons définir plusieurs propriétés calculées dans l'objet calculé de l'instance Vue. Le résultat renvoyé par une propriété calculée peut être utilisé directement dans le modèle et il ne sera recalculé que lorsque la propriété dépendante change. Voici un exemple :

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous trions la liste de produits en calculant les attributs. La propriété calculée sortedProducts trie les prix des produits par ordre croissant, puis renvoie les résultats triés à la directive v-for dans le modèle pour le rendu.

Il est à noter qu'une propriété calculée ne sera recalculée que lorsque les propriétés dont elle dépend changent. Ainsi, même si nous utilisons this.products dans la propriété calculée sortedProducts, sortedProducts ne sera pas recalculé tant que les produits n'ont pas changé.

1.2 Traiter les données existantes

Les propriétés calculées peuvent non seulement être utilisées pour calculer de nouvelles données, mais peuvent également être utilisées pour traiter des données existantes, telles que le formatage des dates ou du montant, etc. Voici un exemple :

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous formatons l'heure de la commande en une chaîne de date et d'heure locale (toLocaleString) en calculant les attributs et affichons le résultat formaté dans le modèle. En raison de la nature des propriétés calculées, formattedTime ne sera recalculé que lorsque orderTime changera.

2. watch

watch est une fonction qui surveille en profondeur les sources de données unifiées. Contrairement au calcul, lorsque la source de données surveillée par la montre change, le modèle ne sera pas automatiquement restitué, mais l'opération doit être effectuée manuellement. watch est principalement utilisé pour surveiller les modifications des données afin de déclencher les opérations correspondantes. Voici un exemple :

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous utilisons watch pour surveiller la variable de texte dans la zone de saisie. Lorsque la longueur du texte dépasse 10 caractères, la montre déclenchera l'opération correspondante et affichera une boîte d'avertissement pour empêcher l'utilisateur de continuer à saisir. En même temps, nous comptons le nombre de caractères restants via l'attribut calculé calculé. Nous pouvons voir que l'attribut calculé charsLeft ne sera recalculé que lorsque le texte sera modifié.

Il est à noter que la variable surveillée par la montre est une fonction et recevra deux paramètres : nouvelle valeur et ancienne valeur. Nous pouvons effectuer les opérations correspondantes en fonction de ces deux paramètres. watch fournit également des options avancées telles qu'une surveillance approfondie et une exécution immédiate, qui peuvent être configurées en fonction de besoins spécifiques.

3. Conclusion

computed et watch sont des outils essentiels dans Vue.js, qui conviennent très bien aux traitements et suivis complexes de données. Nous pouvons définir plusieurs propriétés calculées dans le calcul et contrôler l'ordre de calcul et la méthode de mise à jour via des dépendances. En surveillance, nous pouvons surveiller en profondeur la source de données et réagir aux changements dans la source de données en temps réel. Bien que le calcul et la surveillance entraînent certains coûts d'apprentissage et d'utilisation, l'augmentation de ces coûts vous aidera à créer des applications Vue plus flexibles et plus efficaces.

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!