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

Vue3.0中的性能优化

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

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

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

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

1. PatchFlag

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

动态数据

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

如果我们要编译以下代码

<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("span"<