Cómo Funcionan las Propiedades Computadas y los Watchers en Vue.js

El sistema de reactividad de Vue rastrea automáticamente las dependencias y actualiza tu interfaz cuando los datos cambian. Pero saber cuándo usar propiedades computadas de Vue 3 versus watchers de Vue 3 puede marcar la diferencia entre un código limpio y eficiente, y una pesadilla de mantenimiento. Exploremos cómo funcionan estas características y cuándo cada una brilla.

Entendiendo los Fundamentos de la Reactividad de Vue

El sistema de reactividad de Vue 3 usa Proxies para rastrear cuándo se accede y modifican las propiedades. Cuando los datos reactivos cambian, Vue sabe exactamente qué partes de tu aplicación dependen de esos datos y las actualiza eficientemente. Las propiedades computadas y los watchers son dos herramientas poderosas construidas sobre esta base, cada una sirviendo propósitos distintos en tu flujo de trabajo reactivo.

Propiedades Computadas de Vue 3: Declarativas y en Caché

Las propiedades computadas derivan nuevos valores reactivos de datos existentes. Son declarativas, están en caché y siempre deben ser funciones puras sin efectos secundarios.

Sintaxis de 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>

Sintaxis de Options API

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

¿La ventaja clave? El almacenamiento en caché. Vue solo recalcula una propiedad computada cuando sus dependencias cambian. Si referencias formattedTotal múltiples veces en tu plantilla, el cálculo se ejecuta una vez por ciclo de actualización, no en cada acceso.

Propiedades Computadas Escribibles

Ocasionalmente, necesitas una propiedad computada con getter y 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(' ')
  }
})

Watchers de Vue 3: Efectos Secundarios Imperativos

Los watchers observan valores reactivos y ejecutan efectos secundarios cuando cambian. A diferencia de las propiedades computadas, los watchers son imperativos y perfectos para operaciones asíncronas, llamadas a API o manipulaciones del DOM.

Sintaxis Básica 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 para Rastreo Automático

watchEffect rastrea automáticamente las dependencias sin declararlas explícitamente:

import { ref, watchEffect } from 'vue'

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

watchEffect(async () => {
  // Rastrea automáticamente searchQuery.value
  if (searchQuery.value.length > 2) {
    results.value = await fetchSearchResults(searchQuery.value)
  }
})

Opciones Avanzadas de Watcher

watch(source, callback, {
  immediate: true,  // Ejecutar inmediatamente al crear
  deep: true,       // Observar propiedades anidadas
  flush: 'post'     // Ejecutar después de actualizaciones del DOM
})

Computed vs Watch: Tomando la Decisión Correcta

Aquí está cuándo usar cada enfoque:

Usa Propiedades Computadas cuando:

• Derives nuevos valores de datos reactivos existentes
• Necesites el resultado en tu plantilla
• La operación sea síncrona y pura
• Quieras almacenamiento en caché automático

Usa Watchers cuando:

• Realices efectos secundarios (llamadas a API, logging, localStorage)
• Reacciones a cambios de datos con lógica imperativa
• Manejes operaciones asíncronas
• Necesites acceso tanto a valores antiguos como nuevos

Comparación Práctica

// ❌ Incorrecto: Efecto secundario en computed
const searchResults = computed(async () => {
  const response = await fetch(`/api/search?q=${query.value}`)
  return response.json() // No funcionará - computed debe ser síncrono
})

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

// ✅ Correcto: Computed para derivación pura
const filteredResults = computed(() => 
  searchResults.value.filter(item => item.active)
)

Consideraciones de Rendimiento

Las propiedades computadas sobresalen en rendimiento a través del almacenamiento en caché. Solo se recalculan cuando las dependencias cambian, haciéndolas ideales para operaciones costosas:

// Esto solo se recalcula cuando items o filterText cambian
const expensiveFilter = computed(() => {
  console.log('Filtrando...') // Se ejecuta solo cuando cambian las dependencias
  return items.value.filter(item => 
    complexFilterLogic(item, filterText.value)
  )
})

Los watchers, sin embargo, siempre se ejecutan cuando se activan. Úsalos con prudencia, especialmente con deep: true en objetos grandes.

Conclusión

Las propiedades computadas de Vue 3 y los watchers siguen siendo fundamentales para el sistema de reactividad de Vue. Recuerda la regla simple: usa computed para derivaciones puras y en caché, y watchers para efectos secundarios. Las propiedades computadas mantienen tus plantillas limpias y eficientes a través del almacenamiento automático en caché, mientras que los watchers manejan las operaciones imperativas y asíncronas que las propiedades computadas no pueden. Domina ambas, y escribirás aplicaciones Vue que son tanto elegantes como eficientes.

Preguntas Frecuentes

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.