La différence entre les propriétés, méthodes et observateurs calculés dans Vue –

Pour ceux qui commencent l'apprentissage de Vue, il y a un peu de confusion quant à la différence entre méthodes, propriétés calculées et observateurs.

Même s'il est souvent possible d'utiliser chacune d'elles pour accomplir plus ou moins la même chose, c'est important pour savoir où chacun surpasse les autres

Dans cette astuce, nous allons examiner ces trois aspects importants d'une application Vue et leurs cas d'utilisation. Pour ce faire, nous construirons le même composant de recherche en utilisant chacune de ces trois approches.

Méthodes

Une méthode est plus ou moins ce à quoi vous vous attendriez – une fonction qui est la propriété d'un objet. Vous utilisez des méthodes pour réagir aux événements qui se produisent dans le DOM ou vous pouvez les appeler ailleurs dans votre composant, par exemple à partir d'une propriété calculée ou d'un observateur. Les méthodes sont utilisées pour regrouper des fonctionnalités communes, par exemple, pour gérer une soumission de formulaire ou pour créer une fonctionnalité réutilisable telle que la création d'une demande Ajax.

Vous créez une méthode dans une instance Vue, à l'intérieur des méthodes objet:

 new Vue ({
  el: "#app",
  méthodes: {
    handleSubmit () {}
  }
})

Et lorsque vous souhaitez vous en servir dans votre modèle, vous procédez comme suit:

  
     Soumettre
  

Nous utilisons la directive v-on pour associer le gestionnaire d'événements à notre élément DOM, qui peut également être abrégé en signe @ .

Le gestionnaire La méthode sera maintenant appelée à chaque fois que l'utilisateur clique sur le bouton. Pour les cas où vous souhaitez passer un argument qui sera nécessaire dans le corps de la méthode, vous pouvez procéder comme suit:

  
     Submit
  

Nous passons ici un objet événement qui, par exemple, nous permettrait d'empêcher l'action par défaut du navigateur dans le cas d'une soumission de formulaire.

directive pour attacher l'événement, nous pouvons utiliser un modificateur pour obtenir la même chose plus élégamment: @ click.stop = "handleSubmit" .

Voyons maintenant un exemple. d'utiliser une méthode pour filtrer une liste de données dans un tableau.

Dans la démo, nous souhaitons afficher une liste de données et un champ de recherche. Les données rendues changent chaque fois qu'un utilisateur entre une valeur dans la zone de recherche. Le modèle ressemblera à ceci:

  
 Recherche de langue 

  

    
  

  

    
 {{item}} 
  

Comme vous pouvez le constater, nous référons à une méthode handleSearch appelée chaque fois que l’utilisateur tape quelque chose dans notre champ de recherche. Nous devons créer la méthode et les données:

 new Vue ({
  el: '#app',
  Les données() {
    revenir {
      contribution: '',
      langues: []
    }
  },
  méthodes: {
    handleSearch () {
      this.languages ​​= [
        'JavaScript',
        'Ruby',
        'Scala',
        'Python',
        'Java',
        'Kotlin',
        'Elixir'
      ] .filter (item => item.toLowerCase (). includes (this.input.toLowerCase ()))
    }
  },
  created () {this.handleSearch ()}
})

La méthode handleSearch utilise la valeur du champ de saisie pour mettre à jour les éléments répertoriés. Une chose à noter est que dans l'objet méthodes il n'est pas nécessaire de faire référence à la méthode avec this.handleSearch (comme vous devez le faire dans React).

Voir le stylo Vue Methods de SitePoint ( @SitePoint ) sur CodePen .

Propriétés calculées

Bien que la recherche dans l'exemple ci-dessus fonctionne comme prévu, une solution plus élégante consisterait à utiliser une propriété calculée . Les propriétés calculées sont très pratiques pour la composition de nouvelles données à partir de sources existantes, et l'un des gros avantages qu'elles ont sur les méthodes est que leur sortie est en cache. Cela signifie que si quelque chose indépendant de la propriété calculée change sur la page et que l'interface utilisateur est restituée, le résultat mis en cache sera renvoyé et la propriété calculée ne sera pas recalculée, nous épargnant ainsi une opération potentiellement coûteuse.

Les propriétés calculées nous permettent d'effectuer des calculs à la volée en utilisant les données dont nous disposons. Dans ce cas, nous avons un tableau d’articles à trier. Nous voulons effectuer le tri lorsque l'utilisateur entre une valeur dans le champ de saisie.

Notre modèle est presque identique à l'itération précédente, à l'exception du fait que nous respectons la directive v-for a propriété calculée ( filterList ):

  
 Recherche par langue 

  

    
  

  

    
 {{item}} 
  

La partie script est légèrement différente. Nous déclarons les langues dans la propriété data (auparavant, il s’agissait d’un tableau vide) et au lieu d’une méthode, nous avons déplacé notre logique dans une propriété calculée:

 new Vue ({
  el: "#app",
  Les données() {
    revenir {
      contribution: '',
      langues: [
        "JavaScript",
        "Ruby",
        "Scala",
        "Python",
        "Java",
        "Kotlin",
        "Elixir"
      ]
    }
  },
  calculé: {
    filtréListe () {
      return this.languages.filter ((item) => {
        Renvoie item.toLowerCase (). includes (this.input.toLowerCase ())
      })
    }
  }
})

La propriété calculée filterList contiendra un tableau d'éléments contenant la valeur du champ d'entrée. Lors du premier rendu (lorsque le champ d'entrée est vide), l'ensemble du tableau sera rendu. Lorsque l'utilisateur entre une valeur dans le champ, FilterList renvoie un tableau contenant la valeur entrée dans le champ.

Lors de l'utilisation de propriétés calculées, les données que vous souhaitez calculer doivent être disponibles. Sinon, cela entraînerait une erreur dans votre application.

La propriété calculée a créé une nouvelle propriété filterList raison pour laquelle nous pouvons la référencer dans le modèle. La valeur de filterList change chaque fois que les dépendances le font. La dépendance qui est susceptible de changer ici est la valeur de l'entrée .

Voir le stylo Vue Calculated Properties de SitePoint ( @SitePoint ) à . CodePen .

Enfin, notez que les propriétés calculées nous permettent de créer une variable à utiliser dans notre modèle, construite à partir d'une ou de plusieurs propriétés de données. Un exemple courant est la création d'un nom complet à partir du prénom et du nom d'un utilisateur, comme ceci:

calculé: {
  nom complet() {
    retour `$ {this.firstName} $ {this.lastName}`
  }
}

Dans le modèle, vous pouvez ensuite faire {{Nom complet}} . La valeur de fullName change chaque fois que la valeur du prénom ou du nom de famille change.

Watchers

Les observateurs sont utiles dans les cas où vous souhaitez effectuer une action en réponse à une modification survenu (par exemple, à un accessoire ou à une propriété de données). Comme le mentionnent dans Vue docs ceci est particulièrement utile lorsque vous souhaitez effectuer des opérations asynchrones ou coûteuses en réponse à la modification de données.

Dans notre exemple de recherche, nous pouvons revenir à notre exemple de méthodes et configurer un observateur pour la propriété de données input . Nous pouvons ensuite réagir à tout changement de valeur dans l'entrée .

Commençons par inverser le modèle pour utiliser la propriété de données languages ​​:

  
 Language Search 

  

    
  

  

    
. {{item}} 
  

Notre instance de Vue ressemblera à ceci:

 new Vue ({
  el: "#app",
  Les données() {
    revenir {
      contribution: '',
      langues: []
    }
  },
  regarder: {
    contribution: {
      gestionnaire () {
        this.languages ​​= [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ] .filter (item => item.toLowerCase (). includes (this.input.toLowerCase ()))
      },
      immédiat: vrai
    }
  }
})

Ici, j’ai fait de l’observateur un objet (et non une fonction). C'est pour que je puisse spécifier une propriété immédiate ce qui entraînera le déclenchement de l'observateur dès que le composant sera monté. Cela a pour effet de renseigner la liste. La fonction exécutée est alors dans la propriété handler .

Voir le stylo Vue Watchers de SitePoint ( @SitePoint ) sur CodePen ].

Conclusion

Comme on dit, un grand pouvoir implique une grande responsabilité. Vue vous donne les super pouvoirs nécessaires pour créer de superbes applications. Savoir quand utiliser chacun d'eux est la clé pour créer ce que vos utilisateurs vont adorer. Les méthodes les propriétés calculées et les observateurs font partie des superpuissances à votre disposition.

Kingsley Silas est un développeur web nigérian. Il a soif d'acquérir de nouvelles connaissances dans tous les domaines qu'il trouve intéressants.