Uso de this.$set en Vue.js para Declarar Propiedades Reactivas

En Vue.js, una propiedad reactiva es una propiedad cuyo valor cambia dinámicamente con el tiempo y provoca que la interfaz de usuario se actualice automáticamente en respuesta a esos cambios. De manera predeterminada, todas las propiedades que agregas al objeto de datos de un componente Vue.js se vuelven reactivas.

Durante la creación de instancias iniciales de Vue, sólo las propiedades encontradas en el objeto de datos se hacen reactivas. Si intentas agregar una nueva propiedad al objeto después de la creación, Vue no será capaz de hacer esa propiedad reactiva. Entonces, ¿qué hacer si necesitas agregar una nueva propiedad reactiva a un objeto que no forma parte del objeto de datos?

La respuesta a esta incógnita es this.$set(this, 'nuevaProp', valor). Esta es la forma correcta de agregar una nueva propiedad reactiva a un objeto en Vue.js después de haber sido inicializado.

Ejemplo Práctico de this.$set

Imagina que tienes un objeto usuario con una propiedad nombre. Más tarde, decides que necesitas agregar una propiedad edad a este objeto.

let vm = new Vue({
  el: '#app',
  data: {
    usuario: {
      nombre: 'Juan'
    }
  }
})

Añadir la nueva propiedad es tan sencillo como:

vm.$set(vm.usuario, 'edad', 30);

Ahora, edad es una propiedad reactiva y cualquier cambio en su valor se reflejará automáticamente en la interfaz de usuario.

Buenas Prácticas y Observaciones

Debes tener en cuenta que this.$set es una forma de evitar una limitación en JavaScript en la que no se puede detectar la adición de nuevas propiedades. Sin embargo, es siempre una buena práctica declarar todas las propiedades necesarias por adelantado, en el objeto de datos. Esto hace que el código sea más fácil de rastrear y de entender.

Finalmente, recuerda que Vue.js utiliza un sistema de reactividad basado en observables. Esto significa que cada vez que una propiedad reactiva cambia, todos los observadores (como los componentes de Vue.js que dependen de esa propiedad) son notificados automáticamente del cambio. Por lo tanto, el uso de this.$set puede ser crucial para asegurar la correcta actualización de los componentos cuando las propiedades cambian de forma dinámica.