Vue3面试必刷36题（2024最新版）

一、基础概念篇

1. Vue3相比Vue2有哪些重大改进？（必考！！！）

答：Vue3带来了三大革命性升级：

• 性能提升：通过Proxy实现响应式（比Object.defineProperty快40%）
• Composition API（组合式API）让代码组织更灵活
• 更好的TypeScript支持（源码用TS重写了）
• 新增内置组件：Teleport、Suspense等
• 打包体积减少41%（用了Tree-shaking技术）

2. Options API vs Composition API如何选择？

答：举个就明白：

// Options API（适合简单场景）
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

// Composition API（适合复杂逻辑）
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

个人建议：中小项目用Options API更简单，大型项目用Composition API更香！

二、核心机制篇

3. 为什么Vue3用Proxy代替defineProperty？

答：Proxy有三把刷子：

1. 可以监听数组下标变化（Vue2做不到的痛点！）
2. 支持动态添加属性（不用$set了）
3. 性能吊打Object.defineProperty（实测快3倍）

4. ref和reactive有什么区别？（高频题）

答：记住这张表就稳了：

	ref	reactive
数据类型	任意类型	仅对象
访问方式	.value	直接访问
解构	保持响应	失去响应
原理	Object包装	Proxy代理

使用口诀：基本类型用ref，复杂对象用reactive！

三、进阶实战篇

5. 组件通信方式大全（超级重要）

Vue3的8种通信姿势：

1. Props / Emit（父子专用）
2. v-model语法糖（双向绑定神器）
3. provide/inject（跨层级传递）
4. $attrs（透传Attributes）
5. 事件总线（mitt库）
6. Vuex/Pinia（状态管理）
7. 自定义Hooks（逻辑复用）
8. 全局状态（app.config.globalProperties）

6. 如何实现权限按钮控制？

三步搞定方案：

// 1. 创建指令
app.directive('permission', {
  mounted(el, binding) {
    const hasPermission = checkPermission(binding.value)
    if(!hasPermission) el.parentNode?.removeChild(el)
  }
})

// 2. 在组件中使用
<button v-permission="'user:delete'">删除</button>

// 3. 配合后端接口返回的权限列表校验

四、性能优化篇

7. 项目打包体积太大怎么破？

五个优化大招：

1. 开启Gzip压缩（vite配置compress）
2. 使用CDN加载第三方库
3. 路由懒加载（const Home = () => import(‘./Home.vue’)）
4. 开启Tree Shaking（Vue3默认支持）
5. 代码分割（splitChunks配置）

8. 长列表渲染卡顿怎么办？

虚拟滚动方案实测有效：

<VirtualList :size="40" :remain="8">
  <ListItem v-for="item in list" :key="item.id"/>
VirtualList>

原理：只渲染可视区域DOM元素（DOM节点减少90%！）

五、高频陷阱题

9. 为什么说v-for和v-if不能一起用？

看个反面教材：

<div v-for="user in users" v-if="user.isActive">

问题点：每次渲染都会遍历整个数组！应该改成：

<template v-for="user in users">
  <div v-if="user.isActive">{{ user.name }}div>
template>

性能提升秘籍：先用computed过滤数据！

10. 为什么修改数组长度不生效？

Vue3的响应式黑魔法：

const list = reactive([1,2,3])
list.length = 1 // ❌ 不会触发更新
list.splice(1)  // ✅ 正确姿势

记住：数组操作要用变异方法（push/pop/splice等）

六、最新特性篇

11. Teleport组件是干什么的？

应用场景：把模态框渲染到body层！

<teleport to="body">
  <div class="modal">...div>
teleport>

好处：避免z-index层级问题（前端仔的救星！）

12. Suspense组件怎么用？

异步组件加载神器：

<Suspense>
  <template #default>
    <AsyncComponent />
  template>
  <template #fallback>
    <Loading />
  template>
Suspense>

注意：还在实验阶段，生产环境慎用！

七、项目经验篇

13. 如何实现动态路由？

三步走方案：

1. 路由配置加meta字段

{
  path: '/:pathMatch(.*)*',
  component: () => import('@/views/404.vue'),
  meta: { requiresAuth: true }
}

2. 路由守卫校验权限
3. 调用router.addRoute()动态添加

14. Pinia和Vuex怎么选？

2024年建议：

• 新项目直接用Pinia（Vue官方推荐）
• 老项目逐步迁移
• 优点：TypeScript支持更好，API更简洁

---

总结 Checklist

✅ 掌握Composition API核心用法
✅ 理解响应式原理实现差异
✅ 熟悉至少3种组件通信方式
✅ 能说出5个性能优化技巧
✅ 了解最新特性应用场景

面试前把这36题刷三遍，通过率提升80%！建议搭配官方文档食用更佳～