这是一个静态的段落。
{{ dynamicMessage }}
这是一个静态的段落。
", 1); export function render(_ctx, _cache) { return (openBlock(), createElementBlock("div", null, [ _hoisted_1, createElementVNode("p", null, toDisplayString(_ctx.dynamicMessage), 1 /* TEXT */) ])) } ``` 除了静态节点，静态属性也是能够提升的，例如： ```vue ``` 在这个模板中，虽然 button 是一个动态节点，但是属性是固定的，因此这里也有优化的空间： ```js // 静态属性提升 const _hoisted_1 = { class: "btn btn-primary" }; export function render(_ctx, _cache) { return (openBlock(), createElementBlock("button", _hoisted_1, toDisplayString(_ctx.buttonText), 1 /* TEXT */)) } ``` ## 预字符串化 当编译器遇到**大量连续的静态内容**时，会直接将其**编译为一个普通的字符串节点**。例如： ```vue ``` 编译结果中和静态提升相关的部分： ```js const _hoisted_1 = { class: "menu-bar-container" } const _hoisted_2 = /*#__PURE__*/_createStaticVNode("
Vue3:
第二个好处就是在 SSR 的时候，无需重复计算和转换，减少了服务器端的计算量和处理时间。
思考🤔：大量连续的静态内容时，会启用预字符串化处理，大量连续的边界在哪里？
答案：在 Vue3 编译器内部有一个阀值，目前是 10 个节点左右会启动预字符串化。
```vue
```
## 缓存内联事件处理函数
模板在进行编译的时候，会针对**内联的事件处理函数**做缓存。例如：
```vue
```
在 Vue2 中，每次渲染都会为这个内联事件创建一个新的函数，这会产生不必要的内存开销和性能损耗。
```js
render(ctx){
return createVNode("button", {
// 每次渲染的时候，都会创建一个新的函数
onClick: function($event){
ctx.count++;
}
})
}
```
在 Vue3 中，为了优化这种情况，编译器会自动为内联事件处理函数生成缓存代码。
```js
render(ctx, _cache){
return createVNode("button", {
// 如果缓存里面有，直接从缓存里面取
// 如果缓存里面没有，创建一个新的事件处理函数，然后将其放入到缓存里面
onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))
})
}
```
思考🤔：为什么仅针对内联事件处理函数进行缓存？
答案：非内联事件处理函数不需要缓存，因为非内联事件处理函数在组件实例化的时候就存在了，不会在每次渲染时重新创建。缓存机制主要是为了解决内联事件处理函数在每次渲染的时候重复创建的问题。
## block tree
Vue2 在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在比对静态节点上，例如下面的代码：
```vue
```
每次状态更新时，Vue2 需要遍历整个虚拟 DOM 树来寻找差异。这种方法虽然通用，但在大型组件或复杂页面中，性能损耗会比较明显，因为它浪费了大量时间在静态节点的比较上。
思考🤔：前面不是说静态节点会提升么？
答案：静态提升解决的是不再重复生成静态节点所对应的虚拟DOM节点。现在要解决的问题是虚拟DOM树中静态节点比较能否跳过的问题。
**什么是Block**
一个 Block 本质上也是一个虚拟 DOM 节点，不过该**虚拟 DOM 节点上面会多出来一个 dynamicChildren 属性**，该属性对应的值为数组，**数组里面存储的是动态子节点**。以上面的代码为例，form 对应的虚拟 DOM 节点就会存在 dynamicChildren 属性：
有了 block 之后，就不需要再像 Vue2 那样一层一层，每个节点进行对比了，对比的粒度变成了直接找 dynamicChildren 数组，然后对比该数组里面的动态节点，这样就很好的实现了跳过静态节点比较。
**哪些节点会成为 block 节点？**
1. 模板中的根节点都会是一个 block 节点。
```vue
{{ bar }}
{{ a }}
{{ a }}
在 Vue3 中，PatchFlag 通过为每个节点生成标记，显著优化了对比过程。编译器在编译模板时，能够识别哪些属性或内容是动态的，并为这些动态部分生成特定的标记。
Vue3 的 PatchFlag 包括多种类型，每种类型标记不同的更新需求：
- TEXT：表示节点的文本内容可能会发生变化。
- CLASS：表示节点的 class 属性是动态的，可能会发生变化。
- STYLE：表示节点的 style 属性是动态的，可能会发生变化。
- PROPS：表示节点的一个或多个属性是动态的，可能会发生变化。
- FULL_PROPS：表示节点有多个动态属性，且这些属性不是简单的静态值。
- HYDRATE_EVENTS：表示节点的事件监听器是动态的，需要在客户端进行水合处理。
- STABLE_FRAGMENT：表示节点的子节点顺序稳定，允许按顺序进行更新。
- KEYED_FRAGMENT：表示节点的子节点带有 key，可以通过 key 进行高效的更新。
- UNKEYED_FRAGMENT：表示节点的子节点无 key，但可以通过简单的比较进行更新。
例如上面的代码，编译出来的函数：
```js
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", {
class: _normalizeClass($setup.user),
"data-id": "1",
title: "user name"
}, _toDisplayString($setup.user.name), 3 /* TEXT, CLASS */))
}
```
通过这些标记，Vue3 在更新时不再需要对每个属性都进行全面的对比，而是只检查和更新那些被标记为动态的部分，从而显著减少了不必要的计算开销。
>面试题：说一下 Vue3 在进行模板编译时做了哪些优化？
>
>参考答案：
>
>Vue3 的编译器在进行模板编译的时候，主要做了这么一些优化：
>
>1. 静态提升：解决的是静态内容不要重复生成新的虚拟 DOM 节点的问题
>2. 预字符串化：解决的是大量的静态内容，干脆虚拟 DOM 节点都不要了，直接生成字符串，虚拟 DOM 节点少了，diff 的时间花费也就更少。
>3. 缓存内联事件处理函数：每次运行渲染函数时，内联的事件处理函数没有必要重新生成，这样会产生不必要的内存开销和性能损耗。所以可以将内联事件处理函数缓存起来，在下一次执行渲染函数的时候，直接从缓存中获取。
>4. Block Tree：解决的是跳过静态节点比较的问题。
>5. 补丁标记：能够做到即便动态节点进行比较，也只比较有变化的部分的效果。
---
-EOF-