|
|
@@ -200,8 +200,10 @@ Vue3 中对不参与更新的元素，会做静态提升，只会被创建一次
|
|
|
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操
|
|
|
作，优化了运行时候的内存占用
|
|
|
```
|
|
|
-<span>你好</span>
|
|
|
-<div>{{ message }}</div>
|
|
|
+<template>
|
|
|
+ <span>你好</span>
|
|
|
+ <div>{{ message }}</div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
// 没有做静态提升之前
|
|
|
export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
@@ -223,9 +225,8 @@ export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
], 64 /* STABLE_FRAGMENT */))
|
|
|
}
|
|
|
</script>
|
|
|
-```
|
|
|
|
|
|
-### 事件监听缓存
|
|
|
+### 3.事件监听缓存
|
|
|
```
|
|
|
未开启事件监听器缓存：
|
|
|
```
|
|
|
@@ -256,7 +257,7 @@ export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
总结来说，开启事件监听器缓存是为了优化性能，减少无谓的DOM更新以及内存消耗。
|
|
|
|
|
|
```
|
|
|
-### SSR 优化
|
|
|
+### 4.SSR 优化
|
|
|
```
|
|
|
当静态内容大到一定量级时候，会用 createStaticVNode 方法在客户端去生成一
|
|
|
个 static node，这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根
|
tangshizhe