Explication détaillée des propriétés calculées de vue et des projets pratiques d'écoute

Cette fois, je vais vous apporter une explication détaillée des propriétés calculées de Vue et des projets pratiques d'écouteur. Quelles sont les précautions pour les propriétés calculées de Vue et les projets pratiques d'écouteur ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Propriétés calculées

Les 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 pendant un moment pour se rendre compte qu'ici on veut afficher la chaîne inversée du message variable. Cela devient 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 certaines données doivent changer lorsque d'autres données changent, il est facile d'abuser des montres - surtout si vous avez déjà 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 utiliser js pour convertir des images en base64

opération de routage dynamique du routeur vue sous-routage

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!