¿Cuánto sabes sobre el análisis del código fuente del DOM virtual de Vue realizado por celebridades de Internet durante la entrevista? Interpretación en profundidad del algoritmo diff.
Didi dididi, el entrevistador envió una invitación a una entrevista. ¿Aceptar la invitación?
Como todos sabemos, el papel de las claves en las entrevistas front-end es un tema muy común, pero muchas veces simplemente flotamos en la superficie del conocimiento sin profundizar en sus principios. En este momento, nuestra competitividad se ha visto al límite aquí. Por lo tanto, el aprendizaje profundo de los principios es un proceso esencial para mejorar la competitividad básica.
En el próximo artículo, explicaremos el muy popular DOM virtual en entrevistas y el algoritmo de diferenciación detrás de él. Lea este artículo detenidamente ~ ¡Hay recursos de aprendizaje gratuitos al final del artículo* * *! ! !
El DOM virtual utiliza objetos JavaScript para describir la estructura jerárquica del DOM. Todos los atributos del DOM tienen atributos correspondientes en el DOM virtual. Esencialmente, es un caché de mapeo entre JS y DOM.
Puntos clave: el DOM virtual es un objeto JS; el DOM virtual es una descripción del DOM real.
La diferencia se produce en el DOM virtual. El algoritmo Diff compara el nuevo DOM virtual con el antiguo DOM virtual para lograr actualizaciones mínimas, que finalmente se reflejan en el DOM real.
Sabemos que el algoritmo de diferenciación ocurre en el DOM virtual, pero ¿cómo se implementa el DOM virtual? De hecho, el DOM virtual se compone de nodos virtuales.
La función h se utiliza para generar nodos virtuales (vnode). Los nodos virtuales tienen los siguientes atributos:
1) sel: tipo de etiqueta, como p, div
2) datos: datos de la etiqueta, como estilo, clase, datos; -*;
3) Nodo secundario: nodo secundario;
4) Texto: contenido de texto
5) olmo: nodo DOM real vinculado al virtual; nodo;
El árbol DOM virtual se obtiene anidando funciones H.
Escribimos una función H discreta, que debe pasar tres parámetros y la sobrecarga es débil.
Formato 1: h ('div ', {}, ' text ')
Formato 2: h ('div ', {}, [])
Formato 3: h ('div ', {}, h())
Primero defina el nodo vnode, que en realidad devuelve el objeto de síntesis de parámetros entrantes.
[Error en la carga de la imagen...(Imagen-7a 9966-1624019394657)]
Luego escribe la función H para realizar diferentes respuestas según el tercer parámetro.
En nuestra comparación, adoptamos cuatro estrategias de búsqueda de aciertos:
1) Frente nuevo y frente antiguo: si hay un acierto, el puntero se mueve hacia atrás al mismo tiempo.
2) Nuevo tras antiguo: al hacer clic, el puntero avanza al mismo tiempo.
3) Después de lo nuevo y antes de lo viejo: el golpe implica el movimiento del nodo, por lo que el nodo señalado por lo nuevo se moverá después de lo viejo.
4) Nuevo frente y antiguo reverso: un golpe implica movimiento de nodo, por lo que el nodo apuntado por el nuevo frente se mueve al frente del frente anterior.
Si se acierta uno de los cuatro tipos anteriores, no se considerará un acierto. Si no hay ningún resultado, debe buscar en un bucle y pasar al primero. Hasta (nuevo antes
Si el nuevo nodo completa el ciclo primero, si quedan nodos en el nodo antiguo (nodos entre el puntero anterior anterior y el puntero posterior anterior), significa que son los nodos a ser eliminado.
Si el nodo antiguo completa el ciclo primero, significa que se debe insertar un nuevo nodo
1. ¿Qué es DOM virtual y Snabbdom?
2. Escritura a mano. Función H de origen inferior
3. Sienta el algoritmo de diferenciación del algoritmo central de Vue
4.4. p>1, base cero o estudiantes con cierta base, estudiantes universitarios
2 Amigos que han estado involucrados en trabajos relacionados durante 1 o 2 años y planean cambiar de carrera en el front-end. p>
3. Personas interesadas en el desarrollo front-end
p>