Diferencias entre la instancia básica de Vue 2 y Vue 3
Veamos algunas diferencias en la instancia de Vue 2 con la de Vue 3 para que tengamos un mejor panorama de lo nuevo
Vue 2
new Vue({
el: '#app',
data() {
message: "Hola vue"
}
});
Vue 3
const app = createApp({
data() {
return {
message: "Hola Vue"
}
}
});
app.mount("#app");
Como podemos ver, la principal diferencia esta en la instanciación, en Vue 2, creamos una nueva instancia usando la palabra reservada new seguido de Vue que recibe un objeto con algunas propiedades ya conocidas, para la versión 3 extraemos createApp para tener nuestra instancia. La segunda diferencia esta en el punto de montaje, es decir, donde nuestro contenido dinámico será renderizado, en la versión dos, teníamos la propiedad el en la que indicábamos el identificador de nuestro elemento contenedor, generalmente App, en ****la nueva versión tenemos que llamar mount y pasarle el identificador.
Declarative rendering con Vue.js
Una característica potente que posee Vue, y que tiene un impacto alto en su rendimiento y escalabilidad es su forma eficiente de actualizar el DOM a través del DOM Virtual. Esto sucede en el proceso de renderizado de nuestros componentes. Pero ¿qué rayos es DOM y DOM Virtual? Veamos que significa cada cosa. Cuando nos referimos a DOM o Modelo de objetos de documento nos referimos a una estructura de árbol, que contiene una serie de nodos, cada uno de estos nodos representa un elemento de nuestro HTML, un nodo puede tener nodos hijos. Imaginemos un blog, donde existen una serie de artículos, el contenedor de nuestro blog sera un node, y cada articulo representa un nodo hijo. El DOM tiene una serie de métodos que nos permiten acceder y cambiar el arbol completo o una parte de él, pero estos métodos tienen un gran problema y es que mientras mas grande es el DOM usarlos conlleva un mayor esfuerzo y esto afecta el rendimiento de nuestras aplicaciones. Por este motivo usamos el DOM Virtual que es una forma de representar nuestro DOM con objetos de Javascript, la razón de esto es que trabajar con objetos de javascript es mucho mas sencillo y eficiente. Por tanto, por cada nodo de nuestro DOM podemos crear un nodo virtual.
Vue aprovecha los nodos virtuales para convertirlos en un nodo del DOM. Vue esta pendiente de los cambios que ocurren en cada nodo, cuando ocurre un cambio verifica su nuevo estado con el anterior y decide si debe o no actualizar el DOM. Si se necesita actualizar el DOM, Vue solo actualiza los nodos que sufrieron cambios y el resto permanece intacto, esto es muy importante porque hace que nuestras aplicaciones reaccionen rápidamente y actualicen el contenido, ademas de esto Vue esta pendiente de aquellos nodos con propiedades reactivas.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?