Vue3.0性能优化之重写虚拟Dom

最新推荐文章于 2024-04-18 08:32:28 发布

summer_zhh

最新推荐文章于 2024-04-18 08:32:28 发布

阅读量3.1k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/summer_zhh/article/details/108080930

版权

Vue3.0通过重写虚拟DOM，提升了性能，减少了不必要的节点追踪。动态数据、动态属性和多层级嵌套的优化使得Vue3在更新时仅关注有`_v`标记的动态节点，避免遍历静态节点。事件监听缓存通过内联函数和缓存提高性能，减少不必要的函数创建。Vue3在编译时解决潜在性能问题，简化开发者工作。

摘要由CSDN通过智能技术生成

Vue3.0中的性能优化

2020年4月21号，Vue的作者尤雨溪在直播中分享了Vue.js 3.0 Beta最新进展, 向我们展示里Vue3中的六大亮点，其中首先提到的就是Performance性能。

Vue3.0中的六大亮点

Performance：性能更比Vue 2.0强。
Tree shaking support：支持对无用模块的“剪枝”，实现按需打包
Composition API：基于函数的组合式API
Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
Better TypeScript support：更优秀的Ts支持
Custom Renderer API：暴露了自定义渲染API

Performance

重写了虚拟Dom
编译模板的优化。
更高效的组件初始化。
update性能提高1.3~2倍。
SSR速度提高了2~3倍。

在Vue2，我们就已经体会到了VDom的优秀表现，尽管如此在Vue3.0中仍然对虚拟Dom进行了重写，这也是Vue3性能能够得到提升的重要原因之一，接下来我们就跟着尤大了解Vue3.0中VDom到底是如何得到优化的。

1. `PatchFlag`

尤大在直播时使用了Vue 3 Template Explorer这个工具给我们做了一些demo展示

动态数据

vue3编译模板
左边是我们要编译的实际代码，右边是编译模板生成的渲染函数

如果我们要编译以下代码

<div>
  <span>static<span/>
  <span>{
  { msg }}</span>
</div>

将会被编译成这个样子

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
   
  return (_openBlock(), _createBlock("div", null, [
    _createVNode(