第 7 卷

1. 用Proxy替代Object.defineProperty，解决Vue2响应式的固有缺陷（如无法监听对象新增/删除属

性、数组索引修改等）；

1. 支持Map、Set等ES6集合类型的响应式，响应式覆盖范围更广。
2. 新增组合式API（Composition API）：
3. 替代传统选项式API（Options API）的逻辑组织方式，通过 setup 函数、 ref、

reactive、 computed 等API，实现逻辑的抽离与复用；

1. 解决Options API中“逻辑碎片化”问题，便于维护大型组件的复杂逻辑。
2. 编译优化：
3. 引入PatchFlags（补丁标记）：编译阶段标记动态节点（如动态文本、动态class），运行时只更

新标记节点，减少虚拟DOM对比开销；

1. 静态提升：将静态节点（如固定文本、无动态绑定的元素）提升到渲染函数外部，避免每次渲染

重新创建，提升性能；

1. 支持Tree-shaking：编译时移除未使用的代码，进一步减小打包体积。
2. 性能大幅提升：
3. 虚拟DOM重写：优化diff算法，减少节点对比次数；
4. 减少重渲染：通过响应式系统的精准依赖收集，只触发依赖状态变化的组件重渲染；
5. 初始化速度提升：相比Vue2，初始化时间减少约55%，内存占用减少约50%。
6. 更好的TypeScript支持：
7. Vue3源码采用TypeScript编写，原生支持类型推导，无需额外编写大量类型声明；
8. 组合式API与TS结合更自然，可精准约束状态和函数类型，提升代码健壮性。
9. 其他API与特性改进：
10. 生命周期钩子调整：新增 onRenderTracked、 onRenderTriggered 等钩子，便于调试响

应式依赖；

1. 模板语法增强：支持多根节点组件、Teleport（传送门）、Suspense（异步组件加载）等新特

性；

1. 自定义指令API优化：简化指令的生命周期钩子（如 bind → beforeMount、

update → updated），更贴近组件生命周期。

19. Vue3的响应式系统工作原理 & 与Vue2的实现差异

1. 创建响应式对象：

2.reactive：用于对象/数组类型，通过 new Proxy(target, handler) 创建目标对象的代理，拦截对象的属性访问（ get）、修改（ set）、删除（ deleteProperty）等操作；

3.ref：用于原始类型（string、number等），通过封装一个包含 value 属性的对象，再对 value 属性使用Proxy实现响应式，外部通过 ref.value 访问和修改。

1. 依赖收集（track）：
2. 当副作用函数（如组件渲染函数、watch回调）执行时，访问响应式对象的属性，触发Proxy的

get 拦截器；

6.get 拦截器调用 track 函数，建立“响应式对象→属性名→副作用函数”的映射关系，存储在全局的 targetMap（WeakMap类型）中，完成依赖收集；

1. 映射结构： WeakMap<target, Map<key, Set<effect>>>，确保响应式对象被销毁时，

依赖自动回收，避免内存泄漏。

1. 副作用触发（trigger）：
2. 当修改响应式对象的属性时，触发Proxy的 set（修改/新增）或 deleteProperty（删除）拦

截器；

1. 拦截器调用 trigger 函数，从 targetMap 中查找该属性对应的所有副作用函数，将其加入执

行队列；

1. 队列去重后，异步执行副作用函数，完成视图更新或其他逻辑。

二、与Vue2响应式实现的核心差异

对比维度Vue2Vue3（Proxy）

（Object.defineProperty）

核心APIObject.defineProperty，拦Proxy，拦截整个对象的操作截对象的单个属性

支持数据类型仅支持普通对象、数组，不支支持普通对象、数组、Map、持Map、Set等ES6集合Set、WeakMap、WeakSet

等多种类型

依赖收集粒度基于Dep类，每个属性对应一基于targetMap映射，粒度更个Dep，存储依赖的Watcher细，依赖存储更高效，支持自

动去重

20. Vue3在编译过程中的优化措施（提升运行时性能）

Vue3的编译系统（核心包： @vue/compiler-core、 @vue/compiler-dom）在解析、优化、生成三个阶段均引入了针对性优化，最终目的是减少运行时虚拟DOM对比和DOM操作的开销，核心优

化措施如下：

1. PatchFlags（补丁标记）优化：
2. 原理：编译阶段标记模板中的动态节点及其动态类型（如动态文本、动态class、动态style、动态

子节点等），生成 render 函数时，将标记作为参数传入 createVNode；

1. 效果：运行时 patch（虚拟DOM对比）阶段，仅针对标记的动态类型进行对比，忽略静态内容，

大幅减少对比次数。例如：标记为“动态文本”的节点，仅对比文本内容，不检查属性、子节点等。

1. 静态提升（Static Hoisting）：
2. 原理：将模板中的静态节点（如 <div>静态文本</div>）或静态根节点（包含多个静态节点的

父节点）提升到 render 函数外部，生成静态VNode常量；

1. 效果：避免每次渲染时重新创建静态VNode，减少内存占用和创建开销；运行时 patch 阶段直接

跳过静态节点的对比，提升渲染效率。

1. 预字符串化（Pre-stringification）：
2. 原理：对于包含大量静态内容的节点（如复杂的静态HTML片段），编译时直接将其转换为字符

串，而非多个VNode节点；

1. 效果：减少VNode的创建数量，运行时通过 innerHTML 直接插入静态内容，比逐个创建VNode

再渲染更高效。