Vue3 常见面试题

核心特性

Vue3 有哪些新特性？

• Composition API
• 更好的 TypeScript 支持
• 性能优化（更小的包体积、更快的渲染）
• Fragments（多根节点组件）
• Teleport（传送门）
• Suspense（异步组件）
• 自定义渲染器 API
• 响应式系统重写（Proxy 替代 Object.defineProperty）

Composition API 和 Options API 有什么区别？

• Options API 按选项（data, methods, computed等）组织代码
• Composition API 按逻辑功能组织代码，更好的代码组织和复用
• Composition API 更适合 TypeScript 和大型项目

Vue3 的响应式原理是什么？

• 使用 Proxy 替代 Vue2 的 Object.defineProperty
• 可以检测到属性的添加和删除
• 可以检测数组索引和 length 变化
• 支持 Map, Set, WeakMap, WeakSet

组合式 API

setup 函数是什么？

• 新的组件选项，在组件创建之前执行
• 接收 props 和 context 参数
• 返回的对象会暴露给模板和组件实例

ref 和 reactive 的区别？

• ref 用于基本类型，通过 .value 访问
• reactive 用于对象，直接访问属性
• ref 在模板中自动解包，不需要 .value

watch 和 watchEffect 的区别？

• watch 需要明确指定监听的数据源和回调
• watchEffect 自动收集依赖，立即执行一次
• watch 可以访问变化前后的值

性能优化

Vue3 做了哪些性能优化？

• 更高效的虚拟 DOM（静态节点提升、补丁标志）
• 基于 Proxy 的响应式系统
• Tree-shaking 支持（更小的包体积）
• 编译时优化（Block tree、Slot 编译优化）

什么是静态提升（Hoisting）？

• 编译时将静态节点提升到渲染函数外
• 避免每次渲染都重新创建这些节点
• 减少虚拟 DOM 比对的开销

组件相关

Teleport 组件的作用是什么？

• 将子组件渲染到 DOM 中的其他位置
• 常用于模态框、通知、弹出菜单等
• 保持组件逻辑位置不变，只改变渲染位置

Suspense 组件的作用？

- 处理异步组件加载状态
- 提供默认内容和加载状态
- 可以等待多个异步依赖

生命周期

Vue3 生命周期有哪些变化？

- `beforeCreate` 和 `created` 被 `setup` 替代
- 其他生命周期加上 `on` 前缀（如 `onMounted`）
- 新增 `onRenderTracked` 和 `onRenderTriggered` 用于调试

其他

Vue3 为什么使用 Proxy 实现响应式？

- 可以检测到属性的添加和删除
- 可以拦截数组变化
- 性能更好
- 支持更多数据结构（Map, Set等）

如何在 Vue3 中使用 TypeScript？

- 更好的类型推断
- 支持使用泛型定义 props
- 可以通过 `defineComponent` 获得更好的类型支持

Vue3 的模板编译器有哪些改进？

- 生成更优化的渲染代码
- 支持 Block tree 减少不必要的比对
- 更好的静态内容处理

Vue3 中的 Fragment 是什么？

- 允许组件有多个根节点
- 不需要额外的包裹元素
- 减少不必要的 DOM 层级