[!info] related notes

• 所属 MOC: Vue MOC
• 学习路径: vue-learning-roadmap
• 主题入口: Vue 3
• 前端总入口: 前端八股文 MOC

Vue高频面试题索引

这页不重复写所有答案，而是把 Vue 面试里最常被追问的主题整理成一张跳转图。真正回答时，关键不是背结论，而是能把概念边界和工程场景连起来。

基础心智模型

• Vue3 的定位和主线：Vue 3
• 生命周期怎么理解：vue3-lifecycle
• 插槽解决什么问题：vue3-slots
• Composition API 和 Options API 的区别：Vue Composition API 和 Options API 的区别, vue-composition-api, vue-options-api
• script setup 有什么好处：Vue 里 script setup 有什么好处, vue-script-setup
• defineProps、defineEmits、defineModel 怎么理解：defineProps、defineEmits、defineModel 怎么理解, vue-script-setup-macros
• withDefaults、defineExpose、defineSlots 怎么理解：withDefaults、defineExpose、defineSlots 怎么理解, vue-script-setup-advanced-macros
• defineModel 和 v-model、props/emit 是什么关系：defineModel 和 v-model、props/emit 是什么关系, vue-define-model
• 什么时候用 defineModel，什么时候用 props/emit：Vue 里什么时候用 defineModel，什么时候用 props/emit, vue-define-model-vs-props-and-emit-selection
• slot 和 props 的边界：Vue 里 slot 适合什么场景，和 props 有什么区别, vue3-slots, vue-props-and-emit
• 组件该怎么拆：vue-component-design-principles

响应式高频题

• Vue3 响应式为什么和 Vue2 不一样：Vue2 与 Vue3 响应式系统对比
• Vue2 与 Vue3 响应式详细对比：Vue2 与 Vue3 响应式系统对比
• Vue3 响应式和 React state 模型差在哪：React 状态模型 vs Vue3 响应式模型
• ref 和 reactive 怎么选：Vue中的ref和reactive
• computed 和 watch 的边界：Vue 计算属性, Vue中的watch和watchEffect
• watch 和 watchEffect 怎么选：Vue 里 watch 和 watchEffect 的区别, Vue中的watch和watchEffect
• 为什么改完状态拿到的 DOM 还是旧的：vue-next-tick, Vue 渲染与更新流程
• nextTick 为什么会出现：Vue 里 nextTick 是什么，什么时候用, vue-next-tick
• computed、watch、watchEffect 怎么区分：Vue 里 computed 和 watch 的区别, Vue 里 watch 和 watchEffect 的区别, Vue 计算属性, vue-watch-and-watch-effect

组件通信高频题

• 父子组件通信有哪些方式：Vue 组件通信
• props 和 emit 的职责：Vue中的props和emit
• provide/inject 适合什么场景：Vue中的provide和inject
• provide/inject 的边界：Vue 里 provide 和 inject 适合什么场景, Vue中的provide和inject
• v-model 本质是什么：Vue v-model
• defineModel 什么时候用：defineModel 和 v-model、props/emit 是什么关系, Vue 里什么时候用 defineModel，什么时候用 props/emit
• 组件通信方式应该怎么选：Vue 里 props emit slot provide inject Pinia 应该怎么选, vue-component-communication-selection, Vue 组件通信
• v-model 的面试表达：Vue 里 v-model 的本质是什么, Vue v-model
• Pinia 和 provide/inject 怎么区分：Pinia 和 provide inject 有什么区别，什么时候该用哪个, Pinia, Vue中的provide和inject
• Vue 通信方式整体怎么对比：Vue 里 props emit slot v-model provide inject Pinia 的区别, vue-communication-comparison, vue-component-communication-selection

工程实践高频题

• Vue Router 解决什么问题：vue-router
• 路由守卫和权限控制怎么协作：vue-router-guards-and-permission-control
• 路由模块该怎么拆：vue-router-module-design
• Pinia 适合解决什么问题：Pinia
• store 应该怎么设计：pinia-store-design-patterns

渲染与性能高频题

• Vue 更新流程是怎样的：Vue 渲染与更新流程
• key 为什么重要：vue-conditional-and-list-rendering, Vue3 虚拟 DOM
• v-if 和 v-show 怎么选：Vue 里 v-if 和 v-show 的区别, vue-conditional-and-list-rendering
• 性能优化一般从哪里入手：vue3-performance-optimization

回答这类题时的主线

1. 先说这个能力解决什么问题
2. 再说核心机制或边界
3. 最后补一个工程里的真实使用场景

这样比单纯背 API 更像真正理解过 Vue。

Related notes

• Vue MOC