vue3面试题

1. Vue 3 中的 Composition API 是什么？它与 Options API 有什么区别？

答案：Vue 3 中引入了 Composition API，它是一种基于函数的 API 风格，用于更灵活地组织和重用组件逻辑。与 Options API 相比，Composition API 允许将相关逻辑组织在一起，而不是按照生命周期钩子或选项进行分割。Composition API 还提供了更好的 TypeScript 支持和更好的代码重用，使得编写更可读、可维护的组件变得更加容易。

2. Vue 3 中的 Teleport 是什么？它有什么作用？

答案：Vue 3 中的 Teleport 是一种新的组件，它提供了一种将子组件渲染到父组件 DOM 层次结构之外的能力。它可以帮助开发者在组件内部创建一个位置，然后将内容渲染到 DOM 树中的其他位置，例如 body 元素。这在处理全局弹出框、对话框、菜单等场景时非常有用，可以避免受 CSS 样式和定位的限制。

3. Vue 3 中的响应式系统有哪些改进？

答案：Vue 3 的响应式系统进行了一些改进，包括了更高效的重渲染机制和更好的 TypeScript 支持。具体改进如下：

• 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，提供了更好的性能和更全面的响应式能力。
• 改进了对数组和 Map、Set 等数据结构的响应式支持。
• 提供了更好的 TypeScript 类型推断和支持，可以更准确地推断组件 props、响应式数据和方法的类型。

4. Vue 3 中的 Fragments 是什么？为什么要使用它们？

答案：Vue 3 中的 Fragments 是一种语法糖，允许我们在组件中使用多个根元素而无需包裹在一个额外的父元素中。它使用 <template> 标签包裹多个根级元素，并将其作为单个片段进行渲染。使用 Fragments 可以使组件的模板结构更清晰，并且不会在 DOM 中引入额外的节点。

5. Vue 3 中的 Suspense 是什么？它的作用是什么？

答案：Vue 3 中的 Suspense 是一种组件，用于实现异步组件的加载和错误处理。它可以在组件树中的某个位置进行标记，在异步组件加载完成之前，可以渲染出等待的状态，例如加载动画或占位内容。一旦异步组件加载完成，Suspense 会自动替换为异步组件的内容。如果异步组件加载失败，则可以在 Suspense 组件中指定错误处理的内容。Suspense 的作用是提供更好的用户体验，并简化了异步组件的处理和错误处理过程。

请注意，以上的答案是基于 Vue 3 版本的相关知识。在实际面试中，可能还会根据具体情况提问更深入或者更广泛的问题。