Componente reactivo de Vue

Reactividad en profundidad

¡Ahora es el momento de sumergirse en profundidad! Una de las características más distintivas de Vue es el sistema de reactividad discreto. Los modelos son objetos de JavaScript con proxy. Cuando los modifica, la vista se actualiza. Hace que la administración del estado sea simple e intuitiva, pero también es importante comprender cómo funciona para evitar algunos errores comunes. En esta publicación, vamos a conocer algunos de los detalles de la reactividad de Vue.

¿Qué es la reactividad?

La reactividad está ligada a las propiedades que definimos en las opciones de data; Vue irá detectando cada vez que modificamos dichas propiedades.

Cada una de estas propiedades, tiene un watcher interno al framework que detecta cuando existen cambios en la misma y al detectar, dispara la opción de render (del template) dando como resultado que vemos los cambios reflejados en esa propiedad en la lógica que tengamos definida en nuestro template; es importante señalar, que el proceso de render es ejecutado SOLO si los cambios en la propiedad afectan al template;

En la práctica tenemos un proceso muy optimizado al momento en el que Vue actualice el DOM (template)

Puedes ver un ejemplo en el cual vemos esto más en detalle con ejemplos prácticos: