¿Por qué Vue3.0 es tan rápido?

También leí los artículos de otras personas y los escribí.
Algunas personas los escribieron bien. ¿Por qué los sigo escribiendo yo mismo? Solo después de escribirlos yo mismo puedo recordarlos con mayor claridad.

Cambios en el algoritmo diff

在这先解释一下什么是Diff算法;		
	diff算法是通过循环递归对节点进行比较,比较出节点状态和需要的操作,最后使用vnode进行DOM渲染,
	在次过程中会有俩个DOM树,一个第一次渲染的,一个更新后的渲染的。

1. Al usar el algoritmo diff en vue2.0, se renderizarán todos los nodos. Independientemente de si es un div codificado de forma rígida o necesita ser cambiado, se volverá a renderizar 2.
Cuando se renderiza vue3.0, se agregará una marca estática de acuerdo a si es necesario el cambio al renderizar el Dom.
inserte la descripción de la imagen aquí

El dibujo es bastante feo, solo miralo

polipasto estático

  1. En vue2.0, al actualizar el Dom, se actualizará y recreará por completo. consume rendimiento
  2. En vue3.0, los elementos que no se actualizan solo se crearán una vez y se reutilizarán en cada representación posterior, como el div codificado en la imagen de arriba.

cacheHandlers caché de escucha de eventos

1. El Onclick anterior se considerará como vinculación dinámica, y el cambio de vinculación dinámica se rastreará cada vez, pero es la misma función, simplemente reutilícela directamente

renderizado ssr

  1. Cuando hay mucho contenido estático, será puramente en forma de cadena en el búfer. Incluso si hay un contenido que cambia dinámicamente, también puede usar el método de interpolación de plantilla, que es más rápido que el DOM virtual.
  2. Cuando el contenido estático alcanza un cierto nivel, el método _createStaticVNode se usará para generar una estática en el cliente. Estos nodos estáticos serán directamente HTML interno, por lo que no es necesario crear objetos y luego renderizar de acuerdo con los objetos, lo que significa que no es necesario pasar por el proceso de virtual dom.

Dirección de referencia https://blog.csdn.net/shadowfall/article/details/112385269

Supongo que te gusta

Origin blog.csdn.net/weixin_44655037/article/details/120331119
Recomendado
Clasificación