vue面试题（3）-Vue 3 新特性

1. Composition API 和 Options API 的区别及优势

• 区别：
  • Options API：按选项（data, methods, 生命周期）组织代码，逻辑分散。
  • Composition API：按逻辑功能组织代码，通过 setup 函数集中管理响应式数据和方法。
• 优势：
  • 更好的逻辑复用（通过自定义 hook 替代 mixin）。
  • 更灵活的组合能力，适合复杂组件（如状态管理、异步逻辑）。
  • 更好的 TypeScript 支持（类型推导更清晰）。

---

2. setup 函数的作用和使用场景

• 作用：
  • Composition API 的入口，用于定义响应式数据、计算属性、方法等。
  • 替代 Vue 2 的 data, methods, 生命周期 等选项。
• 使用场景：
  • 需要组合多个逻辑功能时（如用户权限、表单校验）。
  • 需要与 TypeScript 深度集成时。
• 注意：setup 中无 this，需通过参数获取 props 和 context。

---

3. ref 和 reactive 的区别及如何选择？

• 区别：
  • ref：包裹基本类型（如 string, number）或对象，通过 .value 访问值。
  • reactive：包裹对象，直接访问属性（无需 .value）。
• 选择原则：
  • 基本类型或需要替换整个对象时用 ref（如 const count = ref(0)）。
  • 复杂对象且无需替换时用 reactive（如 const state = reactive({ list: [] })）。
  • 注意：解构 reactive 对象会失去响应性，可用 toRefs 解决。

---

4. Vue 3 的 Teleport 组件是解决什么问题的？

• 问题：组件模板的 DOM 结构受父组件样式或层级限制（如模态框被父元素 overflow: hidden 遮挡）。
• 解决方案：
  • 使用 <Teleport to="body"> 将子组件渲染到指定 DOM 节点（如 body 末尾）。
• 场景：模态框、全局通知、悬浮按钮等需要脱离当前 DOM 层级的组件。

---

5. Vue 3 的 Fragment 和多个根节点的支持有什么意义？

• Fragment：允许组件模板包含多个根节点（Vue 2 仅支持单根节点）。
• 意义：
  • 减少无意义的包裹元素（如 <div>），简化代码结构。
  • 更符合实际场景需求（如表格组件 <tr> 并列渲染）。
• 示例：

  <template>
    <header>标题</header>
    <main>内容</main>
  </template>
  

---

总结建议

• 回答时结合项目经验（如：“在管理后台中，我使用 Teleport 将全局通知渲染到页面顶部”）。
• 强调 Composition API 的工程化优势（如逻辑复用、代码可维护性）。
• 对比 Vue 2 的限制（如单根节点、逻辑分散），体现对 Vue 3 新特性的理解。