vue3【详解】 vue3 比 vue2 快的原因

news2024/11/25 21:26:49

使用 Proxy 实现响应式

vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！）

更新类型标记 Patch Flag

在编译模板时（将vue语法转换为js描述的虚拟节点vdom）, vue3 对动态节点添加了标记，效果如下：

静态节点无标记

<!-- 静态节点 -->
<span>你好</span>

编译后

_createElementVNode("span", null, "你好")

动态文本节点会标记为1/*TEXT*/

<span>{{msg}}</span>

编译后

_createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

更多vue3模板编译效果可通过下方网站预览
https://template-explorer.vuejs.org/

有了这些动态节点标记，vue3 在diff 算法时便可以跳过对不会发生变化的静态节点的比较，只比较可能发生变化的动态节点，从而提升了 diff 算法的性能，比需要比较静态节点的 vue2 更快！

在这里插入图片描述

缓存静态节点 hoistStatic

是一种典型的拿空间换时间的优化策略，具体操作如下：

将静态节点的定义，提升到父作用域，缓存起来（缓存后，就能在之后的编译中跳过编译，从而提升编译速度！）

<span>你好</span>
<span>{{msg}}</span>

编译后

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "你好", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _hoisted_1,
    _createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}

可见静态节点被定义为 _hoisted_1 提升到了父作用域，进行了缓存

对超过9个的相邻静态节点进行合并(合并后，优化了代码结构，减小了编译后代码的体积，实现了编译速度的提升！)

<span>你好1</span>
<span>你好2</span>
<span>你好3</span>
<span>你好4</span>
<span>你好5</span>
<span>你好6</span>
<span>你好7</span>
<span>你好8</span>
<span>你好9</span>
<span>你好10</span>

编译后

import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span><span>你好8</span><span>你好9</span><span>你好10</span>", 10)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _hoisted_1
}

缓存事件 cacheHandler

也是一种典型的拿空间换时间的优化策略，具体操作如下：

给事件添加缓存（在之后的编译中跳过编译，提升编译速度！）

<button @click='save'>保存</button>

编译后

import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("button", {
    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.save && _ctx.save(...args)))
  }, "保存"))
}

_cache[0] || (_cache[0] = ... 的部分，可见使用了缓存（已有缓存，则使用缓存，若无缓存，则重新编译）

SSR 优化

静态节点直接输出，绕过了 vdom

<span>你好</span>
<span>{{msg}}</span>

编译后

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(`<!--[--><span${
    _ssrRenderAttrs(_cssVars)
  }>你好</span><span${
    _ssrRenderAttrs(_cssVars)
  }>${
    _ssrInterpolate(_ctx.msg)
  }</span><!--]-->`)
}

动态节点还是需要动态渲染

tree-shaking

编译时，根据不同的情况，引入不同的 API

<span>你好</span>

编译后

import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("span", null, "你好"))
}

再增加一个动态节点

<span>你好</span>
<span>{{msg}}</span>

编译后

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("span", null, "你好"),
    _createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}