Comment fonctionnent les propriétés calculées et les observateurs dans Vue.js

Le système de réactivité de Vue suit automatiquement les dépendances et met à jour votre interface utilisateur lorsque les données changent. Mais savoir quand utiliser les propriétés calculées Vue 3 par rapport aux observateurs Vue 3 peut faire la différence entre un code propre et performant et un cauchemar de maintenance. Explorons comment fonctionnent ces fonctionnalités et quand chacune excelle.

Comprendre les fondements de la réactivité de Vue

Le système de réactivité de Vue 3 utilise des Proxies pour suivre quand les propriétés sont accédées et modifiées. Lorsque des données réactives changent, Vue sait exactement quelles parties de votre application dépendent de ces données et les met à jour efficacement. Les propriétés calculées et les observateurs sont deux outils puissants construits sur cette fondation, chacun servant des objectifs distincts dans votre flux de travail réactif.

Propriétés calculées Vue 3 : déclaratives et mises en cache

Les propriétés calculées dérivent de nouvelles valeurs réactives à partir de données existantes. Elles sont déclaratives, mises en cache, et doivent toujours être des fonctions pures sans effets de bord.

Syntaxe Composition API

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

const price = ref(100)
const quantity = ref(2)

const total = computed(() => price.value * quantity.value)
const formattedTotal = computed(() => `$${total.value.toFixed(2)}`)
</script>

<template>
  <p>Total: {{ formattedTotal }}</p>
</template>

Syntaxe Options API

export default {
  data() {
    return {
      price: 100,
      quantity: 2
    }
  },
  computed: {
    total() {
      return this.price * this.quantity
    },
    formattedTotal() {
      return `$${this.total.toFixed(2)}`
    }
  }
}

L’avantage clé ? La mise en cache. Vue ne recalcule une propriété calculée que lorsque ses dépendances changent. Si vous référencez formattedTotal plusieurs fois dans votre template, le calcul s’exécute une seule fois par cycle de mise à jour, pas à chaque accès.

Propriétés calculées modifiables

Occasionnellement, vous avez besoin d’une propriété calculée avec à la fois un getter et un setter :

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

Observateurs Vue 3 : effets de bord impératifs

Les observateurs (watchers) observent les valeurs réactives et effectuent des effets de bord lorsqu’elles changent. Contrairement aux propriétés calculées, les observateurs sont impératifs et parfaits pour les opérations asynchrones, les appels API ou les manipulations du DOM.

Syntaxe de base de watch

// Composition API
import { ref, watch } from 'vue'

const searchQuery = ref('')
const results = ref([])

watch(searchQuery, async (newQuery) => {
  if (newQuery.length > 2) {
    results.value = await fetchSearchResults(newQuery)
  }
})

watchEffect pour le suivi automatique

watchEffect suit automatiquement les dépendances sans les déclarer explicitement :

import { ref, watchEffect } from 'vue'

const searchQuery = ref('')
const results = ref([])

watchEffect(async () => {
  // Suit automatiquement searchQuery.value
  if (searchQuery.value.length > 2) {
    results.value = await fetchSearchResults(searchQuery.value)
  }
})

Options avancées des observateurs

watch(source, callback, {
  immediate: true,  // Exécuter immédiatement à la création
  deep: true,       // Observer les propriétés imbriquées
  flush: 'post'     // Exécuter après les mises à jour du DOM
})

Computed vs Watch : faire le bon choix

Voici quand utiliser chaque approche :

Utilisez les propriétés calculées quand :

• Vous dérivez de nouvelles valeurs à partir de données réactives existantes
• Vous avez besoin du résultat dans votre template
• L’opération est synchrone et pure
• Vous voulez une mise en cache automatique

Utilisez les observateurs quand :

• Vous effectuez des effets de bord (appels API, journalisation, localStorage)
• Vous réagissez aux changements de données avec une logique impérative
• Vous gérez des opérations asynchrones
• Vous avez besoin d’accéder à la fois aux anciennes et nouvelles valeurs

Comparaison pratique

// ❌ Incorrect : effet de bord dans computed
const searchResults = computed(async () => {
  const response = await fetch(`/api/search?q=${query.value}`)
  return response.json() // Ne fonctionnera pas - computed doit être synchrone
})

// ✅ Correct : observateur pour les effets de bord
watch(query, async (newQuery) => {
  const response = await fetch(`/api/search?q=${newQuery}`)
  searchResults.value = await response.json()
})

// ✅ Correct : computed pour la dérivation pure
const filteredResults = computed(() => 
  searchResults.value.filter(item => item.active)
)

Considérations de performance

Les propriétés calculées excellent en performance grâce à la mise en cache. Elles ne recalculent que lorsque les dépendances changent, ce qui les rend idéales pour les opérations coûteuses :

// Ceci ne recalcule que lorsque items ou filterText changent
const expensiveFilter = computed(() => {
  console.log('Filtrage...') // S'exécute uniquement au changement de dépendance
  return items.value.filter(item => 
    complexFilterLogic(item, filterText.value)
  )
})

Les observateurs, cependant, s’exécutent toujours lorsqu’ils sont déclenchés. Utilisez-les judicieusement, en particulier avec deep: true sur de gros objets.

Conclusion

Les propriétés calculées Vue 3 et les observateurs restent fondamentaux au système de réactivité de Vue. Retenez la règle simple : utilisez computed pour les dérivations pures et mises en cache, et les observateurs pour les effets de bord. Les propriétés calculées gardent vos templates propres et performants grâce à la mise en cache automatique, tandis que les observateurs gèrent les opérations impératives et asynchrones que les propriétés calculées ne peuvent pas gérer. Maîtrisez les deux, et vous écrirez des applications Vue à la fois élégantes et efficaces.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.