Vue面试题及答案汇总

以下是 剩余22道Vue高频面试题及答案，继续补充完整至50题：

Vue3新特性（续）

29. Vue3中Fragment的作用？

    • 允许组件返回多个根节点，无需包裹额外父元素。

30. Suspense组件的用途？

    • 处理异步组件加载时的等待状态，提供#default和#fallback插槽。

31. Vue3中如何注册全局组件/指令？

    // Vue3
    const app = createApp(App);
    app.component('MyComponent', MyComponent);
    app.directive('focus', { mounted(el) { el.focus() } });
    

Composition API

32. setup函数的作用和参数？

    • 替代data和methods，接收props和context（含emit, slots等），需返回模板使用的数据或函数。

33. watch和watchEffect的区别？

    • watch需明确监听源和回调；watchEffect自动追踪依赖并立即执行。

34. 如何复用逻辑？

    • 使用自定义Hook（如useFetch函数封装请求逻辑）。

TypeScript支持

35. Vue3如何增强TS支持？
    • 使用defineComponent定义组件，提供类型推导；Composition API天然支持类型。

性能优化（续）

36. 如何避免不必要的重新渲染？

    • 使用v-once、v-memo（Vue3）、合理拆分组件、利用shallowRef/shallowReactive。

37. keep-alive的作用？

    • 缓存组件实例，避免重复销毁/创建，常用include/exclude控制缓存规则。

高级指令与组件

38. 自定义v-model的多种方式？

    • Vue3：组件内通过props: ['modelValue']和emits: ['update:modelValue']实现，支持多个v-model绑定（如v-model:title）。

39. 作用域插槽（Scoped Slots）的使用场景？

    <!-- 子组件 -->
    <slot :data="data"></slot>
    <!-- 父组件 -->
    <template #default="{ data }">{{ data }}</template>
    

状态管理

40. Vuex中Module的命名空间作用？

    • 避免状态命名冲突，开启namespaced: true后需通过mapState('moduleA', [...])访问。

41. Pinia如何定义Store？

    // store/counter.js
    export const useCounterStore = defineStore('counter', {
      state: () => ({ count: 0 }),
      actions: { increment() { this.count++ } }
    });
    

实战场景（续）

42. 如何实现表单验证？

    • 使用vee-validate库或自定义验证逻辑，结合v-model和错误状态管理。

43. 如何处理跨域请求？

    • 开发环境配置代理（如vite.config.js的server.proxy），生产环境通过后端解决。

Vue生态工具

44. Vite对比Webpack的优势？

    • 基于ESM的快速冷启动、按需编译、内置对Vue的单文件组件支持。

45. Vue Test Utils常用API？

    • mount()、shallowMount()、find()、trigger()、emitted()等。

进阶原理

46. Diff算法的大致流程？

    • 同级比较、双端指针、key优化复用，尽量减少DOM操作。

47. Vue的模板编译优化（Patch Flags）？

    • Vue3在编译阶段标记动态节点类型（如TEXT、CLASS），Diff时跳过静态内容。

其他高频问题

48. Vue.mixin的优缺点？

    • 优点：复用逻辑；缺点：命名冲突、数据来源不清晰（Composition API更推荐）。

49. Vue3废弃了哪些API？

    • $on/$off（事件总线）、filter、$children、Vue.extend等。

50. 如何实现一个Vue插件？

    // Vue3插件示例
    const myPlugin = {
      install(app, options) {
        app.config.globalProperties.$myMethod = () => { /* ... */ };
      }
    };
    app.use(myPlugin);
    

总计50题覆盖以下核心领域：
✅ 基础概念 & 生命周期
✅ 响应式原理（Vue2/Vue3）
✅ 组件通信 & 指令
✅ Vue Router & Vuex/Pinia
✅ Composition API & Vue3新特性
✅ 性能优化 & 实战场景
✅ 原理进阶 & 生态工具

面试技巧：

1. 结合项目经验举例说明（如性能优化手段的实际应用）。
2. 区分Vue2和Vue3的关键差异（如响应式原理、API变化）。
3. 理解底层原理（如虚拟DOM、Diff算法）能显著提升竞争力。

祝您面试顺利！ ✨