以下是Vue3最核心的20道面试题总结，包含详细解析和代码示例：
一、核心机制
响应式原理（Proxy vs defineProperty）
javascript Copy Code // Proxy实现 const reactive = (target) => new Proxy(target, { get(obj, key) { track(obj, key); return Reflect.get(obj, key) }, set(obj, key, value) { Reflect.set(obj, key, value); trigger(obj, key) } })
优势：自动监听动态属性/数组下标变化，性能提升40%。 Vue2缺陷：需Vue.set处理新增属性，数组需重写方法。
Composition API vs Options API
javascript Copy Code // Composition API逻辑复用示例 const useCounter = () => { const count = ref(0) const increment = () => count.value++ return { count, increment } }
优势：按功能聚合代码，TS支持更好。
二、高频考点
ref vs reactive
ref：处理基本类型，需.value访问 reactive：处理对象，直接访问属性 javascript Copy Code const num = ref(0) // num.value++ const obj = reactive({ a: 1 }) // obj.a = 2
生命周期变化
Vue2 Vue3 (Composition) beforeCreate setup() destroyed onUnmounted() javascript Copy Code onMounted(() => console.log('组件挂载')):ml-citation{ref="4,5" data="citationList"}
v-for与v-if优先级
Vue2：v-for > v-if （不推荐共用） Vue3：v-if > v-for （报错强制分离） 优化方案：用计算属性过滤数据。 三、新增特性
Teleport组件传送
html Copy Code
解决模态框嵌套层级问题。
Suspense异步组件
html Copy Code <template #default> <template #fallback>加载中...
Fragment多根节点 允许组件返回多个元素：
html Copy Code
四、进阶优化
Tree shaking机制 只打包使用到的模块，体积减少41%。
虚拟DOM优化 编译时标记动态节点，跳过静态内容对比。
自定义渲染器 支持WebGL/Native等非DOM环境。
五、实战技巧 逻辑复用模式 使用useFetch封装请求： javascript Copy Code export function useFetch(url) { const data = ref(null) const error = ref(null) fetch(url).then(res => data.value = res).catch(err => error.value = err) return { data, error } }
路由懒加载 javascript Copy Code const routes = [{ path: '/home', component: () => import('./Home.vue') // 代码分割 }]
性能监控 使用performance.mark检测组件渲染时间。 六、陷阱规避 响应式解构丢失 javascript Copy Code // ❌ 错误：解构会失去响应性 const { x } = reactive({ x: 1 }) // ✅ 正确：使用toRefs const { x } = toRefs(reactive({ x: 1 }))
watch vs watchEffect watch：需显式指定依赖源 watchEffect：自动收集依赖 全局API变更 javascript Copy Code // Vue2 Vue.component('comp', { /* ... / }) // Vue3 const app = createApp({}) app.component('comp', { / ... */ })
完整代码示例和原理图解可参考Vue3源码解析专题。掌握这些核心点可覆盖90%面试场景，重点理解响应式设计差异和Composition API的应用逻辑。
