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。
