Principes fondamentaux des propriétés calculées dans Vue.js : API de composition

Propriétés calculées

Considérons un objet réactif :

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

Dans cet objet, nous souhaitons afficher des messages indiquant si l'auteur a publié des livres :

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

Nous avons effectué un calcul basé sur author.books. Le message affiché dans le modèle dépend de la valeur de author.books. Nous pouvons utiliser ce calcul plusieurs fois dans le modèle mais nous ne souhaitons pas l'écrire à plusieurs reprises. Par conséquent, les propriétés calculées doivent être utilisées pour une logique complexe impliquant des données réactives.

Utilisation de Propriétés calculées Exemple :

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

Dans cet exemple, nous avons défini une propriété calculée nomméepublishedBooksMessage. La fonction calculée() attend une fonction getter et la valeur renvoyée est une référence calculée. Vous pouvez accéder au résultat calculé en utilisant publiéBooksMessage.value. Cependant, dans les modèles, les références calculées sont automatiquement déballées, vous pouvez donc les référencer sans ajouter .value.

Les

Propriétés calculées suivent leurs dépendances réactives. Vue sait que le calcul de publiéBooksMessage dépend de la valeur de author.books, et lorsque author.books change, il met à jour tous les contextes qui dépendent de publiéBooksMessage.

Mise en cache calculée et méthodes

Le même résultat peut être obtenu en utilisant une méthode :

<p>{{ calculateBooksMessage() }}</p>

Dans le composant :

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

Vous pouvez définir la même fonction comme méthode au lieu d'une propriété calculée. Les deux approches donnent le même résultat. Cependant, je tiens à souligner que les propriétés calculées sont mises en cache. Cela signifie qu'un
la propriété calculée est réévaluée uniquement lorsque ses dépendances réactives changent. Si la valeur de author.books n'a pas changé lors du rendu du composant, il renverra le résultat précédemment calculé sans réexécuter la fonction getter.

Pourquoi la mise en cache est-elle nécessaire ?

Considérez un scénario dans lequel nous avons une liste calculée coûteuse qui nécessite de parcourir un large tableau et d'effectuer de nombreux calculs. Si nous avions d'autres propriétés calculées qui dépendent de la liste, sans mise en cache, nous exécuterions le getter de notre liste beaucoup plus souvent que nécessaire !

Meilleures pratiques

Les getters doivent être sans effets secondaires. Il est important que les fonctions getter calculées effectuent uniquement des calculs purs et évitent les effets secondaires.

Par exemple, ne modifiez pas les autres états, ne faites pas de requêtes asynchrones ou ne modifiez pas le DOM dans un getter calculé ! Considérez une propriété calculée comme un moyen de dériver une valeur à partir d'autres valeurs : la seule responsabilité est de calculer et de renvoyer cette valeur.

Conclusion

Nous avons appris à effectuer des calculs avec des données réactives dans Vue.js. Pour garantir les hautes performances de l'application, nous devons utiliser des propriétés calculées pour les opérations basées sur des données réactives dans Vue.js.

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!