Como Propriedades Computadas e Observadores Funcionam no Vue.js

O sistema de reatividade do Vue rastreia automaticamente dependências e atualiza sua UI quando os dados mudam. Mas saber quando usar propriedades computadas do Vue 3 versus observadores do Vue 3 pode fazer a diferença entre um código limpo e performático e um pesadelo de manutenção. Vamos explorar como esses recursos funcionam e quando cada um se destaca.

Entendendo a Base da Reatividade do Vue

O sistema de reatividade do Vue 3 usa Proxies para rastrear quando propriedades são acessadas e modificadas. Quando dados reativos mudam, o Vue sabe exatamente quais partes da sua aplicação dependem desses dados e as atualiza eficientemente. Propriedades computadas e observadores são duas ferramentas poderosas construídas sobre essa base, cada uma servindo propósitos distintos no seu fluxo de trabalho reativo.

Propriedades Computadas do Vue 3: Declarativas e Cacheadas

Propriedades computadas derivam novos valores reativos de dados existentes. Elas são declarativas, cacheadas e devem sempre ser funções puras sem efeitos colaterais.

Sintaxe da 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>

Sintaxe da Options API

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

A principal vantagem? Cacheamento. O Vue só recalcula uma propriedade computada quando suas dependências mudam. Se você referenciar formattedTotal múltiplas vezes no seu template, o cálculo é executado uma vez por ciclo de atualização, não em cada acesso.

Propriedades Computadas Graváveis

Ocasionalmente, você precisa de uma propriedade computada com getter e 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(' ')
  }
})

Observadores do Vue 3: Efeitos Colaterais Imperativos

Observadores (watchers) observam valores reativos e executam efeitos colaterais quando eles mudam. Diferente das propriedades computadas, observadores são imperativos e perfeitos para operações assíncronas, chamadas de API ou manipulações do DOM.

Sintaxe Básica do 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 para Rastreamento Automático

watchEffect rastreia dependências automaticamente sem declará-las explicitamente:

import { ref, watchEffect } from 'vue'

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

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

Opções Avançadas de Observadores

watch(source, callback, {
  immediate: true,  // Executa imediatamente na criação
  deep: true,       // Observa propriedades aninhadas
  flush: 'post'     // Executa após atualizações do DOM
})

Computed vs Watch: Fazendo a Escolha Certa

Aqui está quando usar cada abordagem:

Use Propriedades Computadas quando:

• Derivar novos valores de dados reativos existentes
• Você precisa do resultado no seu template
• A operação é síncrona e pura
• Você quer cacheamento automático

Use Observadores quando:

• Executar efeitos colaterais (chamadas de API, logging, localStorage)
• Reagir a mudanças de dados com lógica imperativa
• Lidar com operações assíncronas
• Você precisa acessar tanto valores antigos quanto novos

Comparação Prática

// ❌ Errado: Efeito colateral em computed
const searchResults = computed(async () => {
  const response = await fetch(`/api/search?q=${query.value}`)
  return response.json() // Não vai funcionar - computed deve ser síncrono
})

// ✅ Certo: Watcher para efeitos colaterais
watch(query, async (newQuery) => {
  const response = await fetch(`/api/search?q=${newQuery}`)
  searchResults.value = await response.json()
})

// ✅ Certo: Computed para derivação pura
const filteredResults = computed(() => 
  searchResults.value.filter(item => item.active)
)

Considerações de Performance

Propriedades computadas se destacam em performance através do cacheamento. Elas só recalculam quando as dependências mudam, tornando-as ideais para operações custosas:

// Isso só recalcula quando items ou filterText mudam
const expensiveFilter = computed(() => {
  console.log('Filtrando...') // Executa apenas quando a dependência muda
  return items.value.filter(item => 
    complexFilterLogic(item, filterText.value)
  )
})

Observadores, no entanto, sempre executam quando acionados. Use-os criteriosamente, especialmente com deep: true em objetos grandes.

Conclusão

Propriedades computadas do Vue 3 e observadores permanecem fundamentais para o sistema de reatividade do Vue. Lembre-se da regra simples: use computed para derivações puras e cacheadas e watchers para efeitos colaterais. Propriedades computadas mantêm seus templates limpos e performáticos através do cacheamento automático, enquanto observadores lidam com operações imperativas e assíncronas que propriedades computadas não podem. Domine ambos, e você escreverá aplicações Vue que são tanto elegantes quanto eficientes.

Perguntas Frequentes

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.