Una característica de Vue es que permite definir propiedades computadas (computer properties). Una propiedad computada es una función que no se evalúa cada vez que el componente se renderiza, sino solo cuando cambian las dependencias de las que derivan.

Veamos un ejemplo:

import { ref, computed } from 'vue'

export default {
  setup() {
    const nombre = ref('Michael')
    const apellidos = ref('Knight')

    const nombreCompleto = computed(() => `${nombre.value} ${apellidos.value}`)

    return {
      nombre,
      apellidos,
      nombreCompleto
    }
  }
}

En este ejemplo, la propiedad nombreCompleto se actualiza automáticamente cuando nombre o apellidos cambian. Vue se encarga de observar las dependencias y reevaluar solo cuando es necesario. Hemos definido las variables nombre y apellidos para indicar que son variables reactivas.

Diferencias con los métodos

Podríamos conseguir el mismo resultado definiendo un método:

const obtenerNombreCompleto = () => `${nombre.value} ${apellidos.value}`

Pero hay una diferencia importante: los métodos se ejecutan siempre que el componente se vuelve a renderizar, mientras que las propiedades computadas se cachean. Si nombre y apellidos no cambian, nombreCompleto no se vuelve a evaluar. Esto marca una diferencia clara en componentes que renderizan con frecuencia o que trabajan con cálculos complejos.

Computadas con getters y setters

En la mayoría de los casos usamos propiedades computadas con solo un getter, pero Vue permite también definir un setter:

const nombre = ref('Michael')
const apellidos = ref('Knight')

const nombreCompleto = computed({
  get: () => `${nombre.value} ${apellidos.value}`,
  set: (valor) => {
    const partes = valor.split(' ')
    nombre.value = partes[0] || ''
    apellidos.value = partes.slice(1).join(' ') || ''
  }
})

Esto nos permite utilizar nombreCompleto.value como una variable reactiva que podemos tanto leer como asignar.

Cuándo preferir una propiedad computada

Las usamos cuando:

• El valor depende de propiedades reactivas.
• Necesitamos que se cachee mientras no cambien sus dependencias.
• Queremos separar lógica de presentación sin duplicar código.

En cambio, si la función no depende del estado interno, o si no necesita reactividad, es mejor declararla como método.

Buenas prácticas

• Evitar lógica compleja.
• No usar efectos secundarios (como llamadas a APIs o mutaciones).
• Utilizar nombres descriptivos que no indiquen una acción, sino un valor derivado.

Ejemplo práctico: filtro de elementos

Supongamos que tenemos una lista de usuarios y un campo de búsqueda. Podemos filtrar la lista con una propiedad computada:

import { ref, computed } from 'vue'

export default {
  setup() {
    const usuarios = ref(['Michael', 'Louis', 'Francis', 'Albert'])
    const filtro = ref('')

    const usuariosFiltrados = computed(() => {
      const texto = filtro.value.toLowerCase()
      return usuarios.value.filter(u => u.toLowerCase().includes(texto))
    })

    return {
      usuarios,
      filtro,
      usuariosFiltrados
    }
  }
}

Al escribir en el campo de búsqueda, si modificamos el valor filtro la lista se actualiza automáticamente sin necesidad de llamar a ninguna función manualmente.

Resumen

Las computed propeties son una herramienta específica y muy útil de Vue para derivar valores a partir del estado reactivo. No tienen efectos secundarios ni se ejecutan innecesariamente. Si las usamos bien, podemos reducir duplicaciones y mejorar la claridad del código.