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

最新推荐文章于 2025-05-26 10:03:37 发布

原创最新推荐文章于 2025-05-26 10:03:37 发布 · 3.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#面试 #职场和发展

一、基础概念篇

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有三把刷子：

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

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

答：记住这张表就稳了：

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

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

三、进阶实战篇

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

Vue3的8种通信姿势：

Props / Emit（父子专用）
v-model语法糖（双向绑定神器）
provide/inject（跨层级传递）
$attrs（透传Attributes）
事件总线（mitt库）
Vuex/Pinia（状态管理）
自定义Hooks（逻辑复用）
全局状态（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. 项目打包体积太大怎么破？

五个优化大招：

开启Gzip压缩（vite配置compress）
使用CDN加载第三方库
路由懒加载（const Home = () => import(‘./Home.vue’)）
开启Tree Shaking（Vue3默认支持）
代码分割（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. 如何实现动态路由？

三步走方案：

路由配置加meta字段

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

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

14. Pinia和Vuex怎么选？

2024年建议：

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

总结 Checklist

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

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