Vue 3 面试题精选

核心概念

1. Vue 3 相比 Vue 2 有哪些重大改进？

   • 使用 Proxy 替代 Object.defineProperty 实现响应式
   • Composition API
   • 更好的 TypeScript 支持
   • 更小的体积 (Tree-shaking 支持)
   • 更快的渲染性能
   • 新的生命周期钩子
   • 多根节点支持 (Fragment)

2. 解释 Vue 3 的 Composition API 与 Options API 的区别

   • Composition API 基于函数组织代码，Options API 基于选项组织代码
   • Composition API 更好的逻辑复用 (自定义 hook)
   • Composition API 更好的 TypeScript 支持
   • Composition API 更灵活的代码组织方式

3. Vue 3 中的响应式原理是什么？

   • 使用 Proxy 对象拦截数据的访问和修改
   • 通过 track 函数收集依赖
   • 通过 trigger 函数触发更新
   • 对原始数据创建响应式代理 (reactive/ref)

响应式系统

4. reactive 和 ref 有什么区别？

   • reactive 用于对象/数组，ref 用于基本类型 (但也可以用于对象)
   • ref 需要通过 .value 访问值，reactive 直接访问
   • ref 在模板中自动解包，不需要 .value

5. watch 和 watchEffect 有什么区别？

   • watch 需要明确指定监听的数据源和回调
   • watchEffect 自动追踪回调中用到的响应式数据
   • watch 可以获取旧值和新值，watchEffect 只有当前值
   • watch 是懒执行的，watchEffect 立即执行

6. 如何实现自定义的 ref？

   function customRef(factory) {
     return {
       get() {
         track(this, 'value')
         return factory().value
       },
       set(newValue) {
         factory().value = newValue
         trigger(this, 'value')
       }
     }
   }
   

组件与生命周期

7. Vue 3 的生命周期钩子有哪些变化？

   • beforeDestroy 改为 beforeUnmount
   • destroyed 改为 unmounted
   • 新增了 renderTracked 和 renderTriggered 调试钩子
   • 可以通过 onBeforeMount 等函数式 API 在 setup 中使用

8. Vue 3 中的 Teleport 组件有什么作用？

   • 允许将子组件渲染到 DOM 中的其他位置
   • 常用于模态框、通知、弹出菜单等需要突破父容器限制的组件
   • 语法: <teleport to="body">...</teleport>

9. Vue 3 中的 Suspense 组件有什么作用？

   • 处理异步组件加载时的等待状态
   • 提供 fallback 插槽显示加载中的内容
   • 与异步 setup() 或异步组件配合使用

性能优化

10. Vue 3 中如何优化大型应用的性能？

    • 使用 v-memo 优化静态内容
    • 合理使用 computed 缓存计算值
    • 使用 shallowRef/shallowReactive 减少不必要的响应式转换
    • 组件懒加载
    • 使用 keep-alive 缓存组件状态

11. 解释 Vue 3 的静态提升 (Static Hoisting) 和补丁标志 (Patch Flags)

    • 静态提升: 将静态节点提升到渲染函数外，避免重复创建
    • 补丁标志: 在虚拟 DOM 比对时标记动态部分，只比对需要更新的部分

高级特性

12. 如何在 Vue 3 中实现依赖注入？

    // 提供者
    import { provide } from 'vue'
    provide('key', value)
    
    // 消费者
    import { inject } from 'vue'
    const value = inject('key', defaultValue)
    

13. Vue 3 中的 v-model 有什么变化？

    • 默认使用 modelValue 作为 prop 和 update:modelValue 作为事件
    • 可以自定义修饰符
    • 一个组件上可以使用多个 v-model
    • 语法糖形式变化: v-model:title="pageTitle"

14. 解释 Vue 3 中的渲染函数和 JSX 使用

    • 使用 h() 函数创建虚拟节点
    • 可以从 'vue' 导入 h 函数
    • JSX 需要配置相应的 Babel 插件
    • 在 setup() 中返回一个渲染函数可以替代模板

TypeScript 集成

15. 如何在 Vue 3 中为组件 props 定义 TypeScript 类型？

    import { defineComponent } from 'vue'
    
    export default defineComponent({
      props: {
        message: {
          type: String,
          required: true
        },
        count: {
          type: Number,
          default: 0
        }
      }
    })
    

16. 如何为 ref 和 reactive 定义 TypeScript 类型？

    const count = ref<number>(0)
    const user = reactive<{
      name: string
      age: number
    }>({
      name: 'Alice',
      age: 25
    })
    

实战问题

17. 如何在 Vue 3 中实现全局状态管理？

    • 可以使用 reactive 创建全局状态
    • 使用 provide/inject 跨组件共享状态
    • 对于复杂应用，仍然推荐使用 Pinia 或 Vuex

18. Vue 3 中如何处理错误？

    • 使用 errorCaptured 生命周期钩子
    • 使用 app.config.errorHandler 全局错误处理器
    • 使用 onErrorCaptured 组合式 API

19. 如何实现 Vue 3 自定义指令？

    const app = createApp({})
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
    

20. Vue 3 中如何实现路由过渡动画？

    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>