Vue.js apprenant les propriétés calculées

Préface

Les attributs calculés sont utilisés pour décrire de manière déclarative qu'une valeur dépend d'autres valeurs. Lorsque vous liez des données à une propriété calculée dans un modèle, Vue met à jour le DOM lorsque l'une de ses valeurs dépendantes entraîne une modification de la propriété calculée. Cette fonctionnalité est très puissante et peut rendre votre code plus déclaratif, axé sur les données et plus facile à maintenir.

Lorsque vous commencez à utiliser Vue, toutes les données du modèle seront placées dans l'attribut data. Parfois, après qu'il y ait trop de variables dans l'attribut data, vous avez l'impression que certaines variables qui ne sont utilisées qu'une seule fois le sont. écrit directement dans le modèle. Plus tard, j'ai vu des collègues du même groupe utiliser l'attribut calculé, j'ai donc vérifié à nouveau l'API et j'ai découvert que la meilleure chose à utiliser dans cette situation était calculée.

1. Computed peut garder le modèle clair. Essayez de l'afficher et de le lier uniquement dans le modèle au lieu d'ajouter des opérations logiques.

2. Un autre avantage de l'utilisation du calcul est qu'il changera automatiquement suite aux modifications d'autres attributs de données

Par exemple, un exemple tiré du document officiel :

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

Si vous utilisez watch, il y aura une redondance de code. Par exemple, les changements de statut pendant la diffusion en direct peuvent être utilisés pour calculer s'il faut afficher des attributs de niveau supérieur tels que des vidéos

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

Résumé

Ce qui précède concerne les propriétés calculées de Vue.js. J'espère que le contenu de cet article pourra être utile à l'étude ou au travail de chacun. Si vous avez des questions, vous pouvez le faire. laissez un message pour communiquer.

Pour plus d'articles liés à l'apprentissage des propriétés calculées de Vue.js, veuillez faire attention au site Web PHP chinois !