Vue3 面试题

Vue3 面试题

1. Vue3 中的 Composition API 是什么？与 Options API 相比有什么优势？

答案：

Composition API 是 Vue3 引入的一种新的 API 风格，用于组织和重用组件逻辑。相比于传统的 Options API，Composition API 提供了更好的代码组织、重用和类型推断等方面的优势。

优势如下：

• 更好的代码组织：Composition API 允许将逻辑按照功能相关的方式组织在一起，而不是按照生命周期钩子函数组织。这样可以更容易地理解和维护复杂的组件。
• 更好的代码重用：通过使用 Composition API，可以将逻辑封装为可重用的函数，并在多个组件之间共享。这样可以避免混入和继承等方式带来的问题。
• 更好的类型推断：Composition API 基于 TypeScript，可以更好地推断函数和响应式数据的类型，并提供更好的代码编辑器支持。
• 更好的逻辑复用：Composition API 提供了一些内置的函数（如 watch、computed 等），用于处理常见的逻辑场景，如监听数据变化、计算衍生数据等。

2. Vue3 中的响应式系统是如何工作的？

答案：

Vue3 中的响应式系统是基于 ES6 的 Proxy 实现的。

当一个响应式对象被访问时，Vue3 会通过 Proxy 拦截器捕获该访问，然后建立一个依赖关系，将该访问与正在访问的组件关联起来。当响应式对象的属性发生变化时，Proxy 拦截器会被触发，通知相关的组件进行更新。

Vue3 的响应式系统还使用了一种称为“代理转发”的技术，这意味着只有在真正访问响应式对象的属性时，才会建立依赖关系。这样可以避免不必要的依赖追踪，提高性能。

3. Vue3 中的 teleport 是什么？它的作用是什么？

答案：

teleport 是 Vue3 中新引入的一个组件，用于将组件的内容渲染到 DOM 树中的另一个位置，而不是组件自身所在的位置。它可以用于在组件内部创建一个“传送门”，将内容渲染到指定的目标位置。

teleport 主要有以下作用：

• 在组件外部渲染内容：通过使用 teleport，可以将组件内部的内容渲染到组件外部的指定位置，这样可以在不改变组件结构的情况下，实现更灵活的布局。
• 解决层级限制问题：在某些情况下，组件的样式可能受到父级组件的 CSS 限制，导致无法实现期望的布局。使用 teleport 可以将组件的内容渲染到组件外部的位置，避免受到限制。

4. Vue3 中的 Suspense 是什么？它的作用是什么？

答案：

Suspense 是 Vue3 中引入的一个组件，用于处理异步组件的加载和错误处理。它可以在组件加载过程中显示一个占位符，并在加载完成后显示组件内容。

Suspense 主要有以下作用：

• 处理异步组件加载：当一个组件需要异步加载时，可以使用 Suspense 包裹该组件，并设置一个占位符来显示加载过程中的内容。当异步加载完成后，占位符会被替换为组件内容。
• 处理加载错误：如果异步组件加载失败，Suspense 可以显示一个错误占位符，用于处理加载错误的情况。

Suspense 可以与 v-if 或 v-for 等指令一起使用，以控制组件的显示和隐藏，从而实现更灵活的加载和错误处理。

5. Vue3 中的 Fragments 是什么？为什么要使用 Fragments？

答案：

Fragments 是 Vue3 中引入的一项新特性，它允许在不添加额外 DOM 元素的情况下，渲染多个根级别的元素或组件。

在 Vue2 中，每个组件只能有一个根级别的元素，如果需要渲染多个元素，通常需要使用一个额外的包裹元素。而在 Vue3 中，可以使用 Fragments 来解决这个问题。

使用 Fragments 的优点如下：

• 避免添加额外的 DOM 元素：使用 Fragments 可以避免添加额外的包裹元素，减少 DOM 结构的复杂性，提高渲染性能。
• 更灵活的组件结构：Fragments 允许组件拥有多个根级别的元素，可以更自由地组织组件的结构，提高代码的可读性和维护性。

Fragments 可以使用 <template> 标签或特殊的语法糖 <> 和 </> 来表示。