Desde el diseño de origen para ver la mejora del rendimiento de Vue3

¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

Vue.js 3.0

A continuación , continuaremos aprendiendo Vue3.0 en la sección anterior , continuaremos presentándote a través de los siguientes puntos.

• Cambios en la forma en que se organiza el código fuente
• API de composición
• aumento de rendimiento
• Rápido

aumento de rendimiento

La mejora del rendimiento en Vue3 se puede decir en los siguientes aspectos

• Actualización del sistema receptivo
• Optimización de compilación
• Optimización del tamaño del código fuente

Actualización del sistema receptivo

• El núcleo defineProperty del sistema receptivo en Vue2.x
  • Al inicializar, cada atributo del gabinete base definePropertypasa y convierte los atributos getdel setobjeto
  • Concéntrese en la inicialización, es decir, cuando no usa esta propiedad, Vue también procesa esta propiedad
• El sistema receptivo se reescribe usando el objeto Proxy en Vue3
  • El rendimiento del propio objeto Proxy es mejor que defineProperty
  • Los objetos proxy pueden interceptar el acceso a la propiedad , la asignación , la eliminación , etc.
  • Iterar sobre cada propiedad sin inicialización
  • Cuando se anidan varias capas de propiedades, la capa de propiedades solo procesará las propiedades si se accede a ellas.
  • Puede monitorear propiedades agregadas dinámicamente, propiedades eliminadas e incluso la modificación del índice digital y la modificación del atributo de longitud.

Optimización de compilación

Aquí repasamos a través de un componente, el proceso de compilación de componentes en Vue2

Ver2

• Sabemos que la plantilla en Vue2 debe compilarse primero en una función de representación. Este proceso generalmente se completa durante el proceso de construcción. Durante la compilación, se compilarán el nodo raíz estático y el nodo estático .
• 静态根节点中要求节点中必须有一个静态子节点，因此Vue2中会通过标记根节点的操作，优化diff过程，但是静态节点还需要被diff，这个过程没有被优化
• 当组件的状态发生变化后，会通知 watcher 触发 update 函数，最终执行虚拟dom的patch操作，遍历所有的虚拟节点，找到差异更新到真实节点上
• diff的过程中会去比较整个虚拟dom，先对比新旧的div以及他的属性，然后再对比他的子节点
• Vue2中渲染的最小单位是组件

Vue3

1. Fragments片段的特性

这里我们来看 Vue-template-explorer（Vue3 在线编译）

Vue2 在线编译

这里我们删除掉最外层的静态节点

可以看见

_createElementBlock('div', null, []) => _createElementBlock(_Fragment, null, [])
复制代码

代码中创建了_Fragment也就是我们之前说的片段，其实从这里可以看见，它最外层中还是维护了一个树形结构的

2. Vue3中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容

接着我们打开 提升静态内容的选项

我们可以看见，几个静态节点的dom全部都被提取到了最外层，这些被提升的静态节点，只有在创建的时候被创建一次，之后我们在调用render的时候，只需要进行复用就好。

3.动态节点的优化

我们在来看模板中的插值表达式

<div>
    {{ count }}
</div>
复制代码

我们再来看一下对应的 render 的代码

_createElementVNode("div", null, _toDisplayString(_ctx.count), 1 /* TEXT */),
复制代码

我们可以看见最后的部分有一个 1（1 /* TEXT */表示文本内容动态绑定 ） 这是 patch_falg 标记，将来我们执行diff的时候，会执行有 patch_falg 标记的节点

我们来给他加上一个新的属性

 <div :id="id">
    {{ count }}
  </div>
复制代码

这时候我们来重新观察 render 中的代码

_createElementVNode("div", { id: _ctx.id }, _toDisplayString(_ctx.count), 9 /* TEXT, PROPS */, _hoisted_4),
复制代码

1 /* TEXT */ 变成了 9 /* TEXT, PROPS */, _hoisted_4，之后我们进行编译的时候只需要根据节点就可以很快的进行动态节点的编译

4.事件的优化

<button @click="handler">button</button>

_createElementVNode("button", { onClick: _ctx.handler }, "button", 8 /* PROPS */, _hoisted_5),
复制代码

Aquí, se agrega un controlador de eventos a la propiedad a través de onClick, y luego comenzamos la operación de caché

<button @click="handler">button</button>

 _createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handler && _ctx.handler(...args)))
    }, "button"),
复制代码

El código de render aquí ha cambiado. Cuando renderizamos por primera vez, generará una función (...args) => (_ctx.handler && _ctx.handler(...args))y asignará la función a handler, y cuando la volvamos a llamar más tarde, obtendremos la función del caché. Evita actualizaciones innecesarias

Optimización del tamaño del código fuente

• Algunas API de uso menos común se han eliminado en Vue3
  • plantilla en línea, filtro (realmente me gusta usar esto), etc.
• La dependencia de Tree-shaking es mejor y la importación bajo demanda es mejor.

Siguiente capítulo

En el próximo capítulo presentaremos ¿ ViteEstás listo? ¿estudiar juntos?