Vue3 面试不再慌：这 8 个问题答得好，基本稳了！
面试Vue3岗位，真的只是复习 Composition API、生命周期 和响应式吗？你以为自己准备得差不多了，但一上来，面试官问的是：“Vue3 中的响应式是怎么实现的？和 Vue2 有什么本质不同？”——你还在“setup 里写逻辑就完事了”的认知，可能就被这一问击穿了。
作为 Vue 开发者，这些年我面过别人，也被别人面过。今天就来整理一份 Vue3 面试高频问题+高质量回答，不止是应试，更是一次知识体系的整理升级。
1️⃣ 响应式原理：Vue3 为什么用 Proxy 替代了 Object.defineProperty？
Vue2 使用 Object.defineProperty 劫持每个属性，只能“递归劫持”对象的每一层属性，新增属性时还需要手动 Vue.set()。
而 Vue3 改用了 Proxy，可以“一次劫持”，支持数组、Map、Set 等复杂结构，连 delete obj.prop 这种操作都能监听到。
const obj = reactive({ name: 'Vue' })
obj.name = 'Vue3' // 触发 set
delete obj.name // 触发 deleteProperty
Proxy 本质上是“拦截器”，它让 Vue3 的响应式拥有了“天然闭环”能力，更通用、更强大，也更易维护。
追问警惕：面试官可能会接着问 Proxy 的兼容性——答：IE 不支持，但 Vue3 明确放弃 IE 支持，目标就是现代浏览器。
2️⃣ Composition API 为什么更适合大型项目？
Options API 写久了，痛点很明显：逻辑分散、难以复用、组件臃肿。
Composition API 则是“逻辑聚合”，把同一功能相关的逻辑放在一起。比如一个表单校验逻辑，在 Options API 中可能散落在 data、methods、watch 中，而在 Composition API 中可以写成清晰的函数块。
// composables/useForm.js
export function useForm() {
const name = ref('')
const valid = computed(() => name.value.length > 2)
return { name, valid }
}
这也让我们可以通过 composables 实现业务逻辑的复用与单元测试。
3️⃣ setup 函数的执行时机？能访问 this 吗？
这是个送分题，也是坑点。
-
setup是在组件实例 创建前 执行的。 -
所以 不能访问
this，因为组件还没初始化。 -
想用 props、emit，要通过
setup(props, { emit })解构出来。
setup(props, { emit }) {
console.log(props.title)
emit('custom-event')
}
如果你说错了 this.xxx，面试官可能会当场跟你聊聊“this绑定混乱问题”……
4️⃣ ref 和 reactive 到底有什么区别？
一个字总结：ref 是值包装器，reactive 是对象代理器。
-
ref(1)返回的是{ value: 1 }，要访问.value -
reactive({ count: 0 })返回的是代理对象，直接.count即可
const count = ref(1)
console.log(count.value)
const state = reactive({ count: 1 })
console.log(state.count)
进阶问题：那什么时候该用 ref，什么时候该用 reactive？
-
简单值：用
ref -
多层对象：用
reactive -
数组/Map/Set：推荐用
reactive
5️⃣ watch 和 watchEffect 的区别？
两者都是副作用追踪工具，但思路完全不同：
-
watch(fn, cb)是“精确监听”，明确指定监听目标 -
watchEffect(cb)是“自动收集依赖”，首次立即执行，依赖变化就再执行
watch(() => props.id, (newVal, oldVal) => {
console.log('id changed')
})
watchEffect(() => {
console.log(props.id) // 依赖自动追踪
})
陷阱提醒：watchEffect 没有旧值，且副作用函数里写异步要处理清理逻辑！
6️⃣ 如何实现全局状态管理？必须用 Vuex 吗？
Vue3 已经完全可以用 reactive + provide/inject 实现自己的简易状态管理：
// store.js
const state = reactive({ count: 0 })
export default state
// App.vue
provide('state', state)
// 任意组件
const state = inject('state')
当然，如果你想要更规范的模块化、插件机制，那 Pinia 是 Vue 团队推荐的新一代状态库，取代 Vuex。
7️⃣ Teleport 是什么？有哪些使用场景？
适用于：模态框、弹出层、全局遮罩层等
我是模态框
注意：虽然 DOM 在 body 中渲染，但它仍然遵循组件的响应式逻辑与生命周期。
8️⃣ defineExpose 用来做什么？
当你用
父组件就可以通过 ref 调用子组件的方法：
结语：Vue3 面试不仅是记住 API，而是理解背后的设计动机
如果你把 Vue3 只是当作“Vue2 的语法更新”，那注定在真正的项目和面试中捉襟见肘。
Vue3 是一次设计哲学的升级：从“组件化”到“逻辑模块化”、从“配置式”到“组合式”，它更像是现代 JavaScript 生态中的一部分，而不仅是一个前端框架。
如果你看到这里，说明你真的在认真准备 Vue3 面试。
欢迎点赞收藏支持一下
也可以加我微信 atar24，备注「Vue3 面试」，拉你进群交流项目经验与面试技巧！