vue面试题目

面试一个三年经验的面目 Vue 开发，我问“v-if 和 v-for 为什么不能放一起”，试题对方答“会冲突”。面目再问冲突在哪，试题他说“反正官方不建议”。面目这个回答我听过太多次了。试题真正的面目原因在于优先级：Vue2 里 v-for 比 v-if 先执行，每次渲染都会先跑循环再逐个判断，试题列表大了就是面目白烧性能；Vue3 反过来，v-if 先执行，试题但它拿不到 v-for 的面目循环变量，直接报错。试题所以正确做法是面目用 computed 过滤出需要的列表，再渲染。试题能说清这层的面目人，我基本可以判断他真写过生产代码，不是背八股。

响应式原理是另一个分水岭。Vue2 用 Object.defineProperty 递归劫持每个属性，所以给对象新增属性、用索引改数组，视图都不更新，得靠 $set。Vue3 换成 Proxy，整个对象代理，新增删除都能捕获。但很多人不知道 Proxy 的坑：它只能代理对象，基本类型不行，所以 ref 里包原始值时，Vue 是靠一个 .value 的 getter/setter 手动挡实现的，这也是为什么模板里自动解包、JS 里必须写 .value。这个细节能区分出“用过”和“读过源码”的人。

computed 和 watch 的区别，面试题标准答案是“computed 有缓存，watch 没有”。对，但不够。computed 的缓存依赖它内部的响应式依赖，依赖不变就不重算，而且它是惰性的，没人读它就不执行。watch 是命令式的，你明确告诉它监听谁、做什么。我见过有人用 watch 监听一个值然后赋值给另一个 data，其实用 computed 一行就够。反过来，异步请求、路由变化这种副作用，必须用 watch。选错工具，代码会越写越乱。

组件通信这块，props 和 emit 是基础，但真实项目里跨层级传值，很多人还在用 provide/inject 或者事件总线。Vue3 里事件总线基本被废弃了，官方推荐用 mitt 这种第三方库，或者干脆上 Pinia。Pinia 比 Vuex 好在哪？没有 mutations，action 直接改 state，TypeScript 推断友好，模块不用嵌套。我自己的项目从 Vuex 迁到 Pinia，代码量少了大概三成。

生命周期题现在问得少了，但有个点值得说：Vue3 的 setup 里没有 beforeCreate 和 created，因为 setup 本身就在那个阶段执行。onMounted 对应 mounted，但注意它在服务端渲染时不会调用。还有 keep-alive 包裹的组件，activated 和 deactivated 会替代 mounted 和 unmounted 的某些行为，这个在 tab 切换场景里经常踩坑。

最后说 diff。Vue2 双端对比，Vue3 最长递增子序列。面试官爱问“为什么 Vue3 快”，答案不只是 Proxy，还有编译时的静态提升、patch flag、事件缓存。比如一个静态节点，Vue3 编译后会把它提到 render 函数外面，每次更新直接复用，不重新创建。这些优化在大型列表里效果很明显。

面试题背得再熟，不如打开 devtools 看一次真实的更新过程。我招人时更看重你遇到问题怎么定位——是 console.log 乱打，还是用 Vue devtools 看组件树和事件流。这个习惯比知道多少 API 重要得多。