【学习打卡】第 13 天 Vue3(5)

课程名称：前端框架及项目面试 聚焦 Vue3/React/Webpack
课程章节：第 6 章 Vue3 学习（新）
主讲老师：双越

课程内容：

今天学习的内容包括：
6-20 什么是 PatchFlag
6-21 什么是 HoistStatic 和 CacheHandler
6-22 SSR 和 Tree-shaking 的优化
主要讲了 vue3 编译模板的几种优化
6-23 Vite 为什么启动非常快
6-25 Composition API 和 React Hooks 的对比

课程收获：

大概复述一下

PatchFlag

主要是针对动态节点标记
纯变量 1,
class 2
props 8 [“id”, “msg”]
text + props 9 [“id”]
编译模板时会依据属性变量不同用数字标记不同的类型，这样 diff 算法可区分静态节点和不同类型的动态节点。

HoistStatic

把静态节点定义到父作用域缓存起来。多个连续的静态节点，会合并成一个常量。标记 -1 HOISTED。
避免了重复创建相同的函数，用空间换时间。

CacheHandler

缓存事件

SSR 服务端渲染下的优化

编译成模板字符串，静态节点直接输出，动态节点动态渲染

tree shaking

依据编译内容不同（变量， v-if, v-model），引入不同 API

vite 启动快原因

开发环境用 ES6 module 不用打包
生产环境 rollup，速度没有明显提升

ES6 module，直接 script 里写 import

<script type="module">
  import { add, multi } from "./src/math.js";
</script>

Composition API 和 React Hooks 的对比

Composition API：setup 调一次
React Hooks：调多次, 用 useMemo useCallback 缓存数据函数，要保证 hooks 顺序一致

结束