使用 Proxy 实现响应式
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！）
更新类型标记 Patch Flag
在编译模板时（将vue语法转换为js描述的虚拟节点vdom）, vue3 对动态节点添加了标记，效果如下：
静态节点无标记
你好
编译后
_createElementVNode("span", null, "你好")
动态文本节点会标记为1/*TEXT*/
{{msg}}
编译后
_createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
更多vue3模板编译效果可通过下方网站预览 https://template-explorer.vuejs.org/
有了这些动态节点标记，vue3 在diff 算法时便可以跳过对不会发生变化的静态节点的比较，只比较可能发生变化的动态节点，从而提升了 diff 算法的性能，比需要比较静态节点的 vue2 更快！
缓存静态节点 hoistStatic
是一种典型的拿空间换时间的优化策略，具体操作如下：
将静态节点的定义，提升到父作用域，缓存起来（缓存后，就能在之后的编译中跳过编译，从而提升编译速度！）
你好
{{msg}}
编译后
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个的相邻静态节点进行合并(合并后，优化了代码结构，减小了编译后代码的体积，实现了编译速度的提升！)
你好1
你好2
你好3
你好4
你好5
你好6
你好7
你好8
你好9
你好10
编译后
import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode } from "vue"
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("你好1你好2你好3你好4你好5你好6你好7你好8你好9你好10", 10)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return _hoisted_1
}
缓存事件 cacheHandler
也是一种典型的拿空间换时间的优化策略，具体操作如下：
给事件添加缓存（在之后的编译中跳过编译，提升编译速度！）
编译后
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
你好
{{msg}}
编译后
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(` _ssrRenderAttrs(_cssVars) }>你好 _ssrRenderAttrs(_cssVars) }>${ _ssrInterpolate(_ctx.msg) }`) } 动态节点还是需要动态渲染 tree-shaking 编译时，根据不同的情况，引入不同的 API 你好 编译后 import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue" export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("span", null, "你好")) } 再增加一个动态节点 你好 {{msg}} 编译后 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 */)) } 可见因增加了动态节点，增加了 import 的 API，如 createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment