Inicialización de una Instancia

En Vue.js, toda aplicación se fundamenta en la creación de una instancia raíz mediante la función Vue. Esta instancia gestiona el estado y la lógica de la aplicación.

const aplicacion = new Vue({
  // configuraciones
})

Una aplicación Vue.js se compone de una isntancia raíz y, opcionalmente, un árbol de componentes anidados y reutilizables.

Gestión de Datos y Métodos

Datos Reactivos

Al instanciar Vue, se incorporan al sistema reactivo todas las propiedades encontradas en el objeto data. Cualquier cambio en estos valores provoca una actualización automática de la vista.

Solo las propiedades presentes en data durante la creación de la instancia son reactivas. Para propiedades que se necesitarán más adelante, se deben definir valores iniciales.

Métodos de Instancia

Las instancias de Vue exponen propiedades y métodos útiles, prefijados con $ para distinguirlos de las propiedades definidas por el usuario.

• instancia.$el
• instancia.$data
• instancia.$watch(atributoDatos, funcion)

Propiedades Computadas, Métodos y Observadores

Métodos

Los métodos se definen para ejecutar funciones que se pueden invocar directamente o en directivas. El contexto this dentro de un método se vincula automáticamente a la instancia de Vue.

Evite usar funciones flecha para definir métodos, ya que el contexto this no se vincularía a la instancia Vue, causando errores.

const gestor = new Vue({
  datos: { contador: 0 },
  metodos: {
    incrementar: function() {
      this.contador++
    }
  }
})

gestor.incrementar()
console.log(gestor.contador) // 1

Propiedades Computadas

Las expresiones en plantillas son útiles para operaciones simples, pero para lógica compleja se recomiendan las propiedades computadas, que se basan en dependencias reactivas.

<div id="ejemplo">
  <p>Texto original: "{{ mensaje }}"</p>
  <p>Texto invertido: "{{ mensajeInvertido }}"</p>
</div>

const demo = new Vue({
  el: '#ejemplo',
  datos: {
    mensaje: 'Hola'
  },
  computed: {
    mensajeInvertido: function() {
      return this.mensaje.split('').reverse().join('')
    }
  }
})

Observadores

Para escenarios que requieren operaciones asíncronas o costosas ante cambios de datos, se usan observadores con la opción watch.

const buscador = new Vue({
    datos: {
        consulta: ''
    },
    watch: {
        consulta: function(nuevaConsulta, consultaAnterior) {
          this.resultado = 'Procesando...'
          this.debounceBuscar()
        }
    },
})

Diferencias Clave

• Métodos vs. Propiedades Computadas: Las propiedades computadas almacenan resultados en caché según sus dependencias, recalculándose solo cuando esas cambian. Los métodos se ejecutan en cada renderizado.
• Propiedades Computadas vs. Observadores: Las computadas son ideales cuando un valor depende de varios otros. Los observadores son útiles cuando un dato afecta a múltiples acciones o requiere lógica asíncrona.

Ciclo de Vida

Ganchos del Ciclo de Vida

Vue.js ofrece una serie de ganchos que se ejecutan en diferentes etapas de la instancia.

1. beforeCreate: Ejecutado tras la inicialización, entes de la observación de datos y configuración de eventos.
2. created: Ejecutado al crear la instancia, con datos observados y métodos inicializados. El elemento DOM aún no está disponible.
3. beforeMount: Invocado antes del montaje, cuando la función render se ejecuta por primera vez. No se llama en renderizado del lado del servidor.
4. mounted: Ejecutado después de que el elemento DOM se monte. Ideal para inicializaciones que requieren el DOM. Los componentes hijos pueden no estar montados aún.
5. beforeUpdate: Llamado antes de que el DOM virtual se actualice tras cambios de datos. Permite ajustes adicionales sin causar re-renderizados extra.
6. updated: Ejecutado tras la actualización del DOM. Aquí se pueden realizar operaciones dependientes del DOM, pero se recomienda evitar cambios de estado para prevenir ciclos.
7. activated: Invocado cuando un componente con keep-alive se activa.
8. deactivated: Invocado cuando un componente con keep-alive se desactiva.
9. beforeDestroy: Ejecutado antes de la destrucción de la instancia, aún completamente operativa.
10. destroyed: Ejecutado tras la destrucción. Todos los vínculos y oyentes de eventos se eliminan, y las instancias hijas se destruyen.