Comment utiliser les attributs calculés pour traiter des données réactives dans Vue

Vue est un framework JavaScript progressif pour créer des interfaces utilisateur. Dans Vue, la mise à jour réactive des données est l'une des fonctionnalités les plus puissantes de Vue. Dans Vue, la liaison de données est unidirectionnelle, c'est-à-dire que les modifications apportées aux données affecteront l'interface, mais les opérations sur l'interface (telles que les entrées utilisateur, etc.) n'affecteront pas les données. Ces mises à jour de données sont automatiquement effectuées via la propriété calculée dans Vue.

La propriété calculée est une méthode utilisée dans Vue pour traiter des données réactives. Son essence est une propriété calculée. Par rapport aux méthodes de Vue, l'attribut calculé se concentre davantage sur le traitement du calcul des données et la mise en cache des données, permettant à Vue de mettre à jour les données plus efficacement. Cet article explique comment utiliser l'attribut calculé et les précautions associées.

Utilisation de base des attributs calculés

La méthode de déclaration des attributs calculés dans Vue est très simple, il suffit d'ajouter un objet calculé à l'instance Vue, par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dans le code ci-dessus, nous déclarons une instance Vue, et A La propriété reverseMessage est définie dans l'objet calculé, qui utilise la propriété message pour le calcul. Lorsque la valeur de l'attribut message change, Vue mettra automatiquement à jour la valeur calculée de reverseMessage et la restituera à l'interface.

Il est à noter que l'attribut calculé doit être une fonction. Cette fonction peut recevoir des paramètres ou non. À l'intérieur de la fonction, utilisez-la pour accéder aux données de l'instance Vue, au lieu d'accéder directement aux variables.

De plus, la valeur de l'attribut calculé sera mise en cache et ne sera recalculée que lorsque les données dépendantes changeront, ce qui peut grandement améliorer l'efficacité de Vue. Par exemple, dans l'exemple ci-dessus, lorsque la valeur de l'attribut message reste inchangée, à chaque lecture de l'attribut reverseMessage, la valeur calculée dans le cache sera directement renvoyée et ne sera pas recalculée.

Utilisation avancée de l'attribut calculé

Le setter dans l'attribut calculé

L'attribut calculé peut non seulement être utilisé pour lire des données, mais peut également être utilisé pour définir des données. La méthode set définie dans l'attribut calculé sera appelée lorsqu'une valeur sera attribuée à l'attribut. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newVal) {
        var names = newVal.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini un attribut fullName, qui est lisible et inscriptible. Nous avons défini une méthode get qui renvoie la chaîne combinée de firstName et lastName. Dans le même temps, une méthode set est également définie, qui reçoit un paramètre newVal et définit les valeurs de firstName et lastName en fonction de ce paramètre. Il convient de noter que la fonction setter dans l'attribut calculé ne renvoie aucune valeur.

Dépendances des attributs calculés

Le calcul des attributs calculés est basé sur les attributs dont il dépend. Lorsque les propriétés dépendantes changent, les propriétés calculées sont automatiquement recalculées. Vue peut collecter automatiquement les dépendances utilisées dans les attributs calculés via le mécanisme de suivi des dépendances. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      console.log('computed fullName')
      return this.firstName + ' ' + this.lastName
    },
    reversedName: function () {
      console.log('computed reversedName')
      return this.fullName.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)

Dans le code ci-dessus, fullName et reverseName dépendent des deux propriétés firstName et lastName. Lorsque nous accédons à la propriété reversedName, Vue calculera automatiquement les valeurs de fullName et reversedName, et affichera le fullName calculé et le reverseName calculé. Lorsque la valeur de firstName est modifiée, Vue recalculera les valeurs de fullName et reversedName, et affichera le fullName calculé et le reverseName calculé.

Il convient de noter que lorsque les données dont dépend l'attribut calculé changent, le getter dans l'attribut calculé est appelé de manière asynchrone. Cela signifie que lorsque les données dépendantes changent, Vue ne mettra pas à jour immédiatement la valeur de la propriété calculée, mais la mettra à jour dans la prochaine boucle d'événements. Cela évite une surcharge de performances inutile.

La différence entre les attributs calculés et les attributs de surveillance

En plus des attributs calculés, Vue fournit également une autre méthode de traitement des données réactives : les attributs de surveillance. Ils ont tous deux la capacité de gérer des données réactives, mais ils diffèrent dans la manière dont ils les mettent en œuvre.

L'attribut watch est un auditeur. Lorsqu'une donnée change, l'attribut watch exécutera immédiatement une fonction de réponse et aura pour effet secondaire de traiter les données. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini l'attribut watch pour écouter les modifications des données et mettre à jour la valeur de l'attribut fullName lorsque firstName ou lastName change. Il convient de noter que la fonction de traitement dans l'attribut watch sera exécutée immédiatement lorsque les données changent.

La plus grande différence entre l'attribut calculé et l'attribut watch réside dans leurs scénarios de mise en œuvre et d'utilisation. L'attribut calculé est plus adapté à la gestion d'opérations répétitives telles que le calcul des données et la mise en cache, ce qui peut grandement améliorer l'efficacité de Vue. L'attribut watch est plus adapté à la surveillance des modifications des données, telles que le déclenchement d'effets d'animation ou l'envoi de requêtes et d'autres opérations d'effets secondaires lorsque les données changent.

Conclusion

Dans Vue, l'attribut calculé est l'un des moyens les plus courants de gérer les données réactives. L'attribut calculé nous permet de traiter les données de manière plus concise et efficace, en évitant les calculs répétés, et améliore également les performances de Vue. Lorsque vous utilisez l'attribut calculé, vous devez faire attention à la fonction de définition, à la relation de dépendance et à la différence entre l'attribut calculé et l'attribut watch dans l'attribut calculé.

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!