Analyse de la différence entre les propriétés et méthodes calculées par vue et les auditeurs

Cet article présente principalement l'explication détaillée des différences entre les propriétés et méthodes calculées de Vue et les auditeurs (points de test d'entretien). Je vais le partager avec vous maintenant et le donner comme référence.

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(&#39;&#39;).reverse().join(&#39;&#39;) }}
</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: &#39;#app&#39;,
 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 et laissons la page se restituer :

Comme vous pouvez le voir, la méthode que nous avons utilisée pour modifier la valeur de l'âge L'attribut de calcul n'a pas été appelé, alors si la valeur de l'attribut calculé change, comme lastName ou firstName, qu'arrivera-t-il au résultat imprimé ?

Comme vous pouvez le voir, lorsque ses dépendances changent de temps, la propriété calculée sera recalculée.

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, donc Rendu de la page :

On voit que tant que notre page est restituée, la méthode sera exécutée une fois, et l'attribut calculé ne sera redemandé que lorsque la valeur de ses dépendances associées changera.

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 nous référant à ce qui précède, nous modifions la valeur de l'attribut age via le navigateur en laissez la page re- Rendu :

Comme vous pouvez le voir, il y a des changements qui ne sont pas liés au nom complet n'a pas changé. Semblable aux propriétés calculées, il y en aura. un cache, uniquement lorsque ses dépendances associées changent. Ce n'est qu'alors qu'il sera réévalué et comparé à la version de propriété calculée, 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse des problèmes de cookies concernant Vue SSR

Introduction au commutateur de commutation intégré de rendu de table iview

Introduction au code permettant à vue-scroller d'enregistrer la position de défilement

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!