Vue3 基础
Vue3 核心特性面试题
Composition API
Vue3 引入了 Composition API，允许开发者通过逻辑功能组织代码，而不是按照选项（data、methods 等）拆分。核心函数包括 setup()、ref、reactive、computed 和 watch。例如：
import { ref, computed } from 'vue';
export default {setup() {const count = ref(0);const doubled = computed(() => count.value * 2);return { count, doubled };}
}
响应式系统改进
Vue3 使用 Proxy 替代了 Vue2 的 Object.defineProperty，支持更全面的响应式数据类型（如 Map、Set），并解决了数组和对象属性的监听限制。ref 用于基本类型，reactive 用于对象类型。
性能优化相关面试题
静态树提升（Static Tree Hoisting）
Vue3 的编译器会标记静态节点，在渲染时跳过这些节点的比对，减少虚拟 DOM 的开销。例如模板中的纯文本节点会被提升为常量。
Diff 算法优化
引入 PatchFlag 标记动态节点类型（如仅 class 或仅 text 动态），在 diff 过程中仅比对带标记的节点，减少不必要的操作。
SSR 渲染速度
Vue3 的服务端渲染速度比 Vue2 快 2-3 倍，得益于更高效的组件编译和更少的运行时开销。
生命周期与 Hooks 面试题
Vue3 生命周期变化
beforeCreate→ 使用setup()created→ 使用setup()- 其他生命周期前缀改为
on（如onMounted）
import { onMounted } from 'vue';
export default {setup() {onMounted(() => console.log('Component mounted'));}
}
新增生命周期钩子
onRenderTracked：调试虚拟 DOM 重渲染onRenderTriggered：追踪触发更新的依赖
组件通信面试题
Props & Emits
父子组件通信方式与 Vue2 类似，但在 setup() 中需要通过参数访问：
export default {props: ['msg'],emits: ['response'],setup(props, { emit }) {emit('response', 'child data');}
}
Provide/Inject
跨层级组件通信，支持响应式数据：
import { provide, inject } from 'vue';
// 祖先组件
setup() {provide('key', ref('value'));
}
// 后代组件
setup() {const data = inject('key');
}
高级特性面试题
Teleport 组件
允许将子组件渲染到 DOM 其他位置，常用于模态框、通知等场景：
<teleport to="#modal-target"><div class="modal">内容</div>
</teleport>
Suspense 组件
处理异步组件加载状态：
<Suspense><template #default><AsyncComponent /></template><template #fallback><LoadingSpinner /></template>
</Suspense>
Fragment 支持
单个组件可返回多个根节点，减少不必要的包裹元素。
实际应用场景题
如何实现权限控制？
- 使用全局前置守卫（router.beforeEach）
- 结合
v-if或自定义指令控制元素显示 - 通过
provide/inject传递用户权限数据
如何优化大型应用的性能？
- 按需加载组件（defineAsyncComponent）
- 使用
keep-alive缓存组件 - 避免不必要的响应式数据（如 markRaw）
- 使用
v-once处理静态内容
Vue3 与 TypeScript 集成
- 定义 Props 类型：
defineProps<{ id: number }>() - 类型推断自动支持 Composition API 返回值
- 使用
defineComponent增强组件类型提示
调试与错误处理
DevTools 集成
Vue3 DevTools 支持：
- 检查组件层级和状态
- 跟踪 Composition API 的 ref/reactive
- 性能分析工具
错误捕获
- 全局错误处理器：
app.config.errorHandler - 生命周期钩子
onErrorCaptured - 异步错误需使用
onUnhandledRejection