前端面试中Vue3组合式API常考问题有哪些？

Vue3 组合式API常考问题全解析

---

在当下热门的前端面试中,Vue3 作为主流框架之一，其核心特性——组合式API（Composition API）几乎成为必考内容，组合式API以其灵活性和代码组织能力，逐渐取代了传统的选项式API，成为 Vue3 开发的核心模式。前端面试中 Vue3 组合式API常考的问题有哪些？本文将结合实际面试场景，梳理高频考点，帮助你高效备考。

组合式API基础概念相关问题

1. 什么是组合式API？与选项式API的区别是什么？
   组合式API是一组基于函数组织的API，允许开发者按逻辑功能组织代码，而非分散在多个选项（如 data、methods）中，其核心优势在于代码复用性更高、逻辑组织更清晰，尤其适合复杂组件开发，面试中常需对比两者差异，例如组合式API通过 setup() 函数入口，将响应式数据、计算属性、生命周期等逻辑集中管理。

2. ref 和 reactive 的区别及使用场景？

   • ref：用于定义基本类型的响应式数据（如字符串、数字），通过 .value 访问或修改值；在模板中自动解包，无需 .value。
   • reactive：用于定义对象类型的响应式数据，通过解构或直接属性访问操作。
     典型场景：单值用 ref，对象/数组用 reactive；若需在模板外操作数据，优先用 ref（如 setTimeout 中修改值）。

生命周期与响应式系统进阶问题

3. 组合式API中如何使用生命周期钩子？
   组合式API通过导入生命周期函数（如 onMounted、onUpdated）并在 setup() 中调用，替代选项式API的 mounted 等选项。

   import { onMount
   (（（（（（即（这里应为代码示例修正为）  (实际应为完整示例）
   import { onMounted } from 'vue';
   setup() {
     onMounted(() => { console.log('组件挂载完成'); });
   }

   需注意,组合式API的生命周期名称前需加 on，且需显式导入。

4. watch 和 watchEffect 的区别是什么？

   • watch：需明确指定监听的依赖源，支持深度监听和立即执行选项，适合依赖明确、需精细控制的场景。
   • watchEffect：自动追踪依赖，初始化时立即执行一次，依赖变化时重新执行；适合依赖关系复杂或动态变化的场景。
     面试考点：需结合代码示例说明两者的使用差异及适用场景。

代码复用与逻辑抽取问题

5. 如何通过组合式API实现逻辑复用？
   组合式API通过自定义 composables 函数（如 useMouse、useFetch）抽取可复用逻辑，定义一个跟踪鼠标位置的函数：

   // useMouse.js
   import { ref, onMounted, onUnmounted } from 'vue';
   export default function useMouse() {
     const x = ref(0), y = ref(0);
     const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
     onMounted(() => window.addEventListener('mousemove', update));
     onUnmounted(() => window.removeEventListener('mousemove', update));
     return { x, y };
   }

   在组件中调用时,直接解构返回值即可复用逻辑。

6. provide 和 inject 在组合式API中的使用方式？
   组合式API中，通过 provide 和 inject 函数实现跨组件层级的数据传递，替代选项式API的同名选项，祖先组件提供数据：

   import { provide } from 'vue';
   setup() { provide('theme', 'dark'); }

   后代组件注入数据：

   import { inject } from 'vue';
   setup() { const theme = inject('theme'); return { theme }; }

性能优化与最佳实践问题

7. 如何避免组合式API中的内存泄漏？
   需在组件卸载时清理副作用（如事件监听、定时器），通常结合 onUnmounted 钩子实现，在自定义 composable 中移除事件监听器。

8. 组合式API是否适合所有场景？
   组合式API更适合中大型组件或需高度复用逻辑的场景；对于简单组件，选项式API可能更简洁，面试中需体现对两者适用场景的权衡理解。

---

Vue3 组合式API的考点覆盖基础语法、响应式原理、代码复用及性能优化等多个维度，掌握上述问题，不仅能应对面试，更能提升实际开发效率，建议结合官方文档和实战项目，深入理解其设计思想与最佳实践。