Comprensión del DOM virtual (DOM virtual) basado en Vue

Creo que todos estarán familiarizados con el concepto de DOM virtual. La premisa para su creación es que el DOM del navegador es muy "caro". Para una experiencia intuitiva, podemos imprimir todos los atributos de un elemento div simple, como se muestra a continuación. :

Se puede ver que el DOM virtual en Vue.js todavía es un poco complicado. Porque incluye muchas funciones de Vue.js. No se deje intimidar por la confusa cantidad de propiedades. De hecho, el DOM virtual en Vue.js se basa en la implementación de la biblioteca de código abierto snabbdom y luego agrega algunas características de Vue.js.

De hecho, VNode es una descripción abstracta del DOM real, y su definición principal no son solo algunos atributos clave, como nombres de etiquetas, datos, nodos secundarios, claves, etc. Se utilizan otras propiedades para ampliar la flexibilidad de VNode e implementar algunas funciones especiales. Dado que un VNode solo se usa para mapear el DOM real para renderizar y no necesita contener métodos para manipular el DOM, es muy liviano y simple.

Además de definir su estructura de datos, el DOM virtual también se asigna al DOM real mediante el proceso de creación, modificación y parcheo de VNode.

Así es como funciona vue.js desde la inicialización hasta el renderizado final. Si desea leer el código fuente de Vue, este diagrama le ayudará.