Vue3比Vue2快在哪里？

Vue3比Vue2快在哪里？

1.diff算法

在Vue2中进行的是全量比较，在vdom树中，按照行进行比较改dom节点的所以属性以及方法，当没有变化的时候会进行children层左树进行全量比较，最后右树，当右树有改变的时候，直接改变右树整个vdom。
Vue3比较的是有静态标记的vdom。不会每一次全部作比较，只是比较有patchflag标记的vdom节点。在与上次虚拟节点进行对比的时候，值对比带有patchflag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。

2.静态标记

Vue 3 Template Explorer：https://vue-next-template-explorer.netlify.app/

将有可能改变的vdom节点添加patchflag标记，有了静态标记值，会在diff的时候找对应的属性来进行对比，进而不需要进行全量、全属性对比，Vue3就是快。

dom节点：

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{{mssage}}</p>
</div>

vdom对象:

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

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "我是第一个p的内容"),
    _createVNode("p", null, "我是第二个p的内容"),
    _createVNode("p", null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
  ]))
}

_createVNode(“p”, null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
上面的 1 可以看上面的图片，我们可以看到1代表文本,意思就是该节点后期文本可能会变化，标记起来，还有为了在diff的时候两个vdom进行patch的时候只对比有flag的。

3.静态提升

Vue2中无论元素是否参与更新，每次都会重新创建，然后在渲染。
Vue3中对于不参加更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可，将没有静态标记的vdom提升到顶端，不再重新渲染。

dom节点：

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{{mssage}}</p>
</div>

静态提升后的vdom

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

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "我是第一个p的内容", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "我是第二个p的内容", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _hoisted_2,
    _createVNode("p", null, _toDisplayString(_ctx.mssage), 1 /* TEXT */)
  ]))
}

可以看到生成了两个变量 _hoisted_1 、_hoisted_2 来存储我们生成的前两个p标签，这样就不需要再次生成，直接复用即可。

4.事件监听器缓存

默认情况下onclick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
不再跟踪标记，缓存到内存中

5.ssr渲染

当有大量静态内容的是时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态绑定，会通过模板插槽嵌入进去，这样会比通过虚拟dom来渲染的快很多。
当静态内容达到一定量级的时候，会用_createStaticVNode方法在客户端生成一个static node，这些静态node，会被直接innerHTML，就不需要创建对象，然后根据对象渲染。

dom节点：

<div>
  <p>我是第一个p的内容</p>
  <p>我是第二个p的内容</p>
  <p>{{mssage}}</p>
</div>

ssr渲染后的vdom

import { mergeProps as _mergeProps } from "vue"
import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  const _cssVars = { style: { color: _ctx.color }}
  _push(`<div${
    _ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
  }><p>我是第一个p的内容</p><p>我是第二个p的内容</p><p>${
    _ssrInterpolate(_ctx.mssage)
  }</p></div>`)
}

xxx

虚拟dom主要是借鉴了snabbdom库,这是一个虚拟dom库，init函数返回一个patch函数，这个函数用于对于上一个虚拟dom和本次生成的虚拟dom，函数内部就是diff在处理，使用snabbdom中的h函数生成vdom。