Comment utiliser les propriétés calculées de Vue

Cette fois je vais vous expliquer comment utiliser l'attribut calcul de vue , quelles sont les précautions de l'attribut calcul de vue, ce qui suit est un cas pratique, jetons un coup d'oeil . Les

Propriétés calculées

Expressions dans les modèles sont très pratiques, mais elles sont conçues pour des opérations simples. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir. Par exemple :

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

Ici, le modèle n'est plus une simple logique déclarative. Il faut regarder un moment pour se rendre compte qu'ici on veut afficher lachaîne inversée du message variable. Cela devient encore plus difficile à gérer lorsque vous souhaitez référencer la chaîne inversée ici plusieurs fois dans le modèle.

Ainsi, pour toute logique complexe, vous devez utiliser des propriétés calculées.

Exemple de base

<p id="app">
 {{fullName}}
</p>
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

Résultat :

Wang Xiaozhi

Ensuite, nous modifions la valeur de l'attribut age via le navigateur, laissez le rendu de la page :

Comme vous pouvez le voir, la méthode que nous avons utilisée pour modifier l'attribut calculé de la valeur d'âge n'a pas été appelée. l'attribut calculé change, comme lastName ou Qu'arrive-t-il au résultat de l'impression lorsque firstName change

Comme vous pouvez le voir, lorsque ses dépendances changent, l'attribut calculé sera recalculé ? .

Cache de propriétés calculées vs méthode

Vous avez peut-être remarqué que nous pouvons obtenir le même effet en appelant une méthode dans une expression :

<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

Résultat :

Wang Xiaozhi

De la même manière, en nous référant à ce qui précède, nous modifions la valeur de l'attribut age via le navigateur et laissons la page s'afficher à nouveau :

On peut voir que tant que notre page est restituée, la méthode sera exécutée une fois et la propriété calculée ne sera réévaluée que lorsque ses dépendances associées changeront .

Pourquoi avons-nous besoin de mise en cache ? Supposons que nous ayons une propriété A coûteuse en termes de calcul, qui nécessite de parcourir un vaste tableau et d'effectuer de nombreux calculs. Nous pourrions alors avoir d’autres propriétés calculées qui dépendent de A. Sans mise en cache, nous exécuterions inévitablement le getter de A plusieurs fois ! Si vous ne souhaitez pas de mise en cache, utilisez plutôt des méthodes.

Propriétés calculées vs propriétés d'écoute

Vous avez peut-être remarqué que nous pouvons également obtenir le même effet grâce aux propriétés d'écoute :

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

Résultat :

Wang Xiaozhi

De la même manière, en référence à ce qui précède, nous modifions la valeur de l'attribut age via le navigateur et laissons la page s'afficher à nouveau :

Comme vous pouvez le constater, pour les modifications qui ne sont pas liées au nom complet, fullName n'a pas changé. Semblable aux propriétés calculées, il y aura un cache qui ne sera réévalué que lorsqu'il sera lié. les dépendances changent, et cela sera comparé aux propriétés calculées. Pour comparer, la version est bien meilleure, n'est-ce pas ?

Lorsque vous avez des données qui doivent changer à mesure que

d'autres données changent, il est facile d'abuser de la surveillance - surtout si vous avez utilisé
AngularJS. Cependant, il est souvent préférable d’utiliser des propriétés calculées plutôt que des rappels de surveillance impératifs.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment obtenir la position de l'élément DOM dans JS

Explication détaillée du fonctionnement dynamique jQuery+ajax tableau tr td étapes

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!