¿Qué pasa con el nuevo DOM virtual en Vue.js 2.0?

Tanto React como Ember utilizan DOM virtual para mejorar la velocidad de actualización de la página. Para entender cómo funciona esto, primero analicemos algunos conceptos:

Actualizar el DOM lleva mucho tiempo

Cuando cambiamos la página usando JavaScript, el navegador necesita trabajar un poco para Encuentre el nodo DOM que necesita y realice los siguientes cambios:

document.getElementById('myId').appendChild(myNewNode);11

Probablemente haya varios DOM en las aplicaciones actuales. Miles de nodos, por lo que las actualizaciones tardan mucho más. LT;LI>Item 2</LI>

<UL>

1234512345

Los nodos DOM también pueden representar objetos en JavaScript, como se muestra a continuación:

// Utilice Javascript para representar el pseudocódigo de los nodos DOM

Let domNode = {

etiqueta: 'ul'

atributos: { id : 'myId' }

children: [Este es nuestro DOM "virtual".

Actualizar los nodos virtuales no es costoso

// Esto es posible. cómo actualizamos el DOM virtual

domNode.children.push('

('

('

('Item 3');1212

Si usamos DOM virtual en lugar de llamar a .getElementById y otros métodos API de DOM directamente en el código, la operación será como directamente en el código Cambiar objetos JS en JS es tan simple y ahorra tiempo como siempre.

El siguiente paso es sincronizar los cambios que hicimos en el DOM *real*, usamos una función muy eficiente:

// Esta función llamará a la API del DOM y al "real". "DOM cambia

//.

//Esta función llamará a la API DOM y realizará cambios en el DOM "real"

//Hará los cambios en lotes y

//Eficiencia mayor que cualquier actualización.

123

sync(originalDomNode, domNode);11

Vue.js agregó un DOM virtual en la versión 2, lo cual es genial... ¿verdad?

Como ocurre con todo en la vida y el desarrollo web, los DOM virtuales tienen ventajas y desventajas.

Tamaño: uno de ellos es que más funciones significan más líneas de código en el código base. Afortunadamente, Vue.js 2.0 es todavía relativamente pequeño (la versión actual es de 21,4 kb) y se ha eliminado una gran cantidad de contenido.

Memoria: de manera similar, el DOM virtual requiere mantener una copia del DOM existente en la memoria, lo que requiere un equilibrio entre la velocidad de actualización del DOM y el uso de la memoria.

No es adecuado para todas las situaciones: sería fantástico si el DOM virtual pudiera modificarse en lotes a la vez. Pero ¿qué pasa con las actualizaciones únicas y escasas? Cualquier actualización de DOM de este tipo hará que el DOM virtual introduzca un cálculo previo inútil.

Entonces, si un proyecto tiene una pequeña cantidad de nodos, ¿el uso de DOM virtual tendrá un impacto cualitativo en la velocidad? De hecho, ¡es más probable que lo haga más lento!

Pero para la mayoría de las aplicaciones de una sola página, esto sigue siendo una mejora.

Más que solo rendimiento

Usar DOM virtual es más que solo una optimización del rendimiento, es más que solo funcionalidad.

Por ejemplo, puedes usar DOM virtual para crear nuevos nodos directamente a través del método render():

new Vue({

el: '#app ',

datos: {

mensaje: 'hola mundo'

},

render() {

var nodo = this.$createElement;

return node(

'div',

{ atributos: { id: 'myId' } },

esto.

);

}

});12345678910111213141234567891011121314

Salida: