Comment utiliser calculé dans Vue pour écouter des données réactives et mettre à jour le DOM

Vue est un framework JavaScript populaire qui combine la liaison de données réactive et la construction basée sur des composants pour simplifier le développement front-end. Computed est un moyen d'utiliser les données réactives de Vue. Il peut générer dynamiquement des propriétés calculées basées sur des données dépendantes, réaliser la conversion et la présentation des données et mettre automatiquement en cache les résultats intermédiaires pour améliorer les performances. Cet article expliquera comment utiliser le calcul pour écouter des données réactives et mettre à jour le DOM.

1. Utilisation de base de calculée

Dans Vue, nous pouvons utiliser l'attribut calculé pour définir une propriété calculée. Le format de syntaxe est :

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

où propertyName est le nom de la propriété calculée et function() est la méthode de calcul spécifique. Nous pouvons accéder à l'attribut data de l'instance Vue dans cette méthode et calculer la valeur de l'attribut, par exemple :

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

Dans cet exemple, nous définissons un attribut calculé totalPrice, qui s'appuie sur deux données réactives, le prix et le montant à chaque fois. leurs valeurs changent, la valeur de totalPrice est également mise à jour dynamiquement. Nous utilisons {{totalPrice}} dans le modèle pour afficher la valeur de cet attribut calculé. Nous n'avons pas besoin de mettre à jour manuellement le DOM nous-mêmes. Vue exécutera automatiquement la méthode de calcul de l'attribut et mettra à jour l'élément DOM correspondant.

2. Cache de dépendances calculé

Une autre caractéristique importante de l'attribut calculé est le cache de dépendances. Cela signifie que tant que les données réactives dont dépend la propriété calculée n'ont pas changé, la propriété calculée ne sera pas recalculée, mais renverra directement le dernier résultat. Cela peut éviter des calculs inutiles et améliorer l’efficacité de fonctionnement du programme.

Par exemple, nous lisons le prix total de la propriété calculé plusieurs fois dans l'exemple ci-dessus, par exemple :

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

Comme vous pouvez le voir, nous lisons le prix total deux fois. Cependant, totalPrice sera recalculé uniquement lorsque le prix ou le montant change, évitant ainsi des calculs répétés.

3. Getters et setters calculés

En plus de l'utilisation de base présentée ci-dessus, le calcul prend également en charge la définition des getters et des setters. Cela signifie que nous pouvons effectuer des opérations supplémentaires lors de l'affectation d'une propriété calculée, comme la validation des données, le formatage des données, etc.

Le format de syntaxe getter et setter de calculé est le suivant :

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

où propertyName est le nom de la propriété calculée. La valeur de la propriété calculée est renvoyée dans la fonction get et la valeur de la propriété calculée est attribuée dans. la fonction réglée.

Par exemple, nous utilisons le setter dans l'exemple ci-dessus pour modifier le prix unitaire du produit, mais le prix unitaire limite ne peut pas être inférieur à 0.

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

Dans cet exemple, nous utilisons des données réactives _price préfixées par un trait de soulignement pour enregistrer le prix unitaire réel du produit et définissons le prix comme un attribut calculé avec des opérations de lecture et de définition. Dans le setter, nous déterminons si le prix saisi par l'utilisateur est un nombre négatif. Si tel est le cas, un message d'erreur est généré, sinon il est attribué à _price.

Résumé

computed est un moyen très pratique d'utiliser des données réactives dans Vue. Il peut générer dynamiquement des propriétés calculées basées sur des données réactives dépendantes et mettre automatiquement en cache les résultats intermédiaires pour améliorer les performances. Nous pouvons effectuer diverses opérations sur les données dans les getters et setters des propriétés calculées, telles que le formatage des données, la vérification des données, etc. Cela peut simplifier le code et améliorer l’efficacité du développement.

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!