Vue3 面试常见八股文 200 题速记版

一、基础认知（1-15）

1. 什么是 Vue3？

• Vue3 是新一代渐进式前端框架。
• 核心升级是响应式系统、组合式 API、性能和 TS 支持。

2. Vue3 相比 Vue2 最大变化是什么？

• 响应式从 defineProperty 改成 Proxy
• 新增 Composition API
• 更好支持 TS
• 编译优化更强

3. Vue3 的核心优势是什么？

• 性能更好
• 逻辑复用更强
• 类型支持更友好
• Tree Shaking 更彻底

4. Vue3 还是 MVVM 吗？

• 是。
• 依然是数据驱动视图，本质思想没变。

5. Vue3 为什么更适合大型项目？

• Composition API 更利于逻辑拆分
• TS 支持更好
• 可维护性更高

6. 什么是渐进式框架？

• 可以按需接入能力，不强制一开始全用。

7. Vue3 适合哪些项目？

• 中后台
• 管理系统
• 组件库
• 中大型 SPA
• 新项目优先

8. Vue3 和 Vue2 能共存吗？

• 可以在不同项目中共存。
• 同一项目迁移通常需要逐步改造。

9. Vue3 为什么性能更好？

• 响应式更高效
• 编译优化更多
• diff 更精细
• 运行时体积更小

10. Vue3 的生态有哪些？

• Vue Router
• Pinia
• Vite
• Vue Devtools

11. Vue3 默认推荐什么状态管理？

• Pinia。
• 更轻、更直观、TS 更友好。

12. Vue3 默认推荐什么构建工具？

• Vite。
• 启动快，热更新快。

13. Vue3 和 React 区别？

• Vue 偏模板
• React 偏 JSX
• Vue 提供更完整官方方案

14. Vue3 为什么更适合 TS？

• API 设计更利于类型推导。
• 组合式写法也更适合抽类型。

15. Vue3 的学习主线是什么？

• 响应式
• setup
• ref/reactive
• 生命周期
• 组件通信
• 路由
• Pinia

二、响应式原理（16-35）

16. Vue3 响应式原理是什么？

• 基于 Proxy 劫持对象。
• 通过 track 收集依赖，trigger 触发更新。

17. Vue3 为什么用 Proxy？

• 能拦截更多操作
• 能直接监听新增/删除属性
• 对数组支持更自然

18. Proxy 比 defineProperty 好在哪？

• 不用递归一上来遍历全部属性
• 可监听新增、删除、数组下标等变化

19. Vue3 的依赖收集是怎么做的？

• 读取数据时 track
• 修改数据时 trigger
• 副作用函数重新执行

20. 什么是 effect？

• 响应式副作用函数。
• 依赖变化后会重新执行。

21. 什么是 track？

• 依赖收集。
• 谁读取了响应式数据，就记录谁。

22. 什么是 trigger？

• 派发更新。
• 数据变化后通知依赖重新执行。

23. Vue3 能监听对象新增属性吗？

• 能。
• 因为 Proxy 可以拦截 set。

24. Vue3 能监听数组下标变化吗？

• 能。
• 这是相对 Vue2 的明显改进。

25. Vue3 响应式一定是深层的吗？

• reactive 默认是深层响应式。
• 但也有 shallowReactive 这种浅层版本。

26. shallowReactive 是什么？

• 只代理第一层。
• 深层对象不继续做响应式。

27. shallowRef 是什么？

• 只跟踪 .value 本身变化。
• 不深度代理内部对象。

28. readonly 是什么？

• 创建只读响应式对象。
• 不能直接修改。

29. shallowReadonly 是什么？

• 第一层只读。
• 深层对象不做深只读处理。

30. markRaw 是什么？

• 标记对象永远不要转成响应式。
• 常用于第三方实例、性能敏感对象。

31. toRaw 是什么？

• 获取响应式对象对应的原始对象。

32. reactive 和普通对象区别？

• reactive 返回的是代理对象，不是原对象本身。

33. 为什么 Vue3 响应式更适合大对象？

• 不需要像 Vue2 那样初始化时深度遍历所有属性做劫持。

34. 响应式丢失常见原因有哪些？

• 解构 reactive
• 直接赋值覆盖响应式对象
• 脱离代理访问

35. 怎么避免响应式丢失？

• 优先用 ref
• 解构时配合 toRefs/toRef
• 不直接替换整个 reactive 对象引用

三、Composition API（36-70）

36. 什么是 Composition API？

• 组合式 API。
• 按功能组织代码，而不是按 options 分类。

37. Composition API 为什么更强？

• 逻辑更集中
• 复用更方便
• 大组件更好维护

38. setup 是什么？

• Composition API 的入口函数。
• 组件创建时最早执行。

39. setup 里能拿到 this 吗？

• 不能。
• setup 中 this 是 undefined。

40. setup 执行时机是什么？

• 在 beforeCreate 前后这个初始化阶段。
• 比 data、methods 更早。

41. setup 返回值有什么用？

• 返回给模板使用。
• 也可以返回给 render 函数使用。

42. 为什么 setup 不要写太大？

• 会导致逻辑堆积。
• 应拆成 composable。

43. 什么是 composable？

• 可复用的组合式逻辑函数。
• 一般以 useXxx 命名。

44. composable 和 mixin 区别？

• composable 来源清晰
• 不容易命名冲突
• 逻辑复用更显式

45. Vue3 为什么弱化 mixin？

• mixin 来源不清楚，冲突难排查。
• composable 更好维护。

46. script setup 是什么？

• setup 语法糖。
• 写法更简洁，模板可直接用顶层变量。

47. script setup 有什么优点？

• 代码少
• 可读性好
• 编译优化更好

48. defineProps 是什么？

• script setup 中定义 props 的宏。

49. defineEmits 是什么？

• script setup 中定义 emits 的宏。

50. defineExpose 是什么？

• 显式暴露子组件内容给父组件 ref 访问。

51. defineOptions 是什么？

• 在 script setup 中声明组件选项。

52. defineSlots 是什么？

• 声明插槽类型信息，常用于 TS。

53. useAttrs 是什么？

• 获取透传 attrs。

54. useSlots 是什么？

• 获取当前组件 slots。

55. getCurrentInstance 有什么用？

• 获取当前组件实例。
• 一般只在少数底层封装场景用。

56. onMounted 在 setup 里怎么用？

• 直接调用生命周期函数注册。

57. setup 能写异步吗？

• 可以，但常结合 Suspense 或异步组件场景。

58. 为什么 Composition API 更适合逻辑拆分？

• 同一功能的数据、方法、监听能放一起。

59. setup 和 data 谁先执行？

• setup 更早。

60. setup 和 methods 能一起用吗？

• 能。
• Options API 和 Composition API 可以共存。

61. setup 里怎么访问 props？

• setup(props) 第一个参数就是 props。

62. setup 里怎么触发 emit？

• setup(props, { emit }) 中通过 emit 触发。

63. setup 第二个参数有哪些？

• attrs
• slots
• emit
• expose

64. 为什么说 script setup 更适合业务组件？

• 模板和逻辑更紧凑，样板代码更少。

65. 什么时候仍然会用 Options API？

• 老项目维护
• 小组件
• 团队习惯

66. setup 返回 reactive 和 ref 给模板时要 .value 吗？

• 模板中通常自动解包 ref，不用手写 .value。

67. JS 中访问 ref 要不要 .value？

• 要。
• 除非经过模板自动解包或特定语法处理。

68. setup 为什么适合封装公共逻辑？

• 不依赖 this，逻辑可直接抽函数复用。

69. composable 命名为什么常用 use 开头？

• 社区约定俗成，看到就知道是复用逻辑。

70. Composition API 的核心心智是什么？

• 按功能聚合代码，而不是按配置项分散代码。

四、ref / reactive（71-95）

71. ref 是什么？

• 用于包装基本类型，也可包装对象。
• 通过 .value 取值。

72. reactive 是什么？

• 用于创建对象或数组的响应式代理。

73. ref 和 reactive 区别？

• ref 更通用
• reactive 更适合对象
• ref 有 .value

74. 为什么推荐优先用 ref？

• 一致性更强
• 替换整体值更方便
• TS 推导也常更稳

75. reactive 能直接接收基本类型吗？

• 不能。
• 只适合对象类型。

76. ref 包装对象时底层是什么？

• 内部也会把对象转成 reactive 风格的响应式。

77. toRef 是什么？

• 把对象某个属性转成 ref。

78. toRefs 是什么？

• 把对象每个属性都转成 ref。
• 常用于解构后仍保持响应式。

79. unref 是什么？

• 如果是 ref 就返回 .value，否则原样返回。

80. isRef 有什么用？

• 判断一个值是不是 ref。

81. isReactive 有什么用？

• 判断一个对象是不是 reactive 创建的。

82. isReadonly 有什么用？

• 判断对象是不是只读代理。

83. isProxy 有什么用？

• 判断对象是不是由响应式代理创建。

84. 为什么 reactive 解构后会丢响应式？

• 解构拿到的是普通值，不再经过代理访问。

85. ref 在模板中为什么不用 .value？

• 模板会自动解包。

86. reactive 为什么不能整体替换？

• 直接替换变量引用会丢失原来的代理关联。

87. ref 为什么适合整体替换值？

• 改的是 .value，本身引用关系不变。

88. toRefs 常见使用场景？

• setup 中返回 reactive 的各个字段给模板或外部使用。

89. 为什么很多团队不用 reactive 管整个表单？

• 大对象解构和替换时更容易出坑。

90. shallowRef 常用场景？

• 大对象
• 第三方实例
• 只关心整体替换，不关心深层变化

91. customRef 是什么？

• 自定义 ref 的依赖追踪和触发逻辑。

92. customRef 常见场景？

• 防抖输入框
• 自定义触发时机

93. triggerRef 是什么？

• 手动触发 shallowRef 更新。

94. ref 嵌套 ref 会怎样？

• 一般不推荐，容易增加理解成本。

95. ref/reactive 怎么选？

• 简单记：基本类型用 ref，对象通常 ref 或 reactive 都行，但团队统一更重要。

五、计算属性与侦听（96-115）

96. computed 是什么？

• 计算属性。
• 基于依赖派生新值。

97. computed 为什么有缓存？

• 依赖不变就复用上次结果。

98. computed 和 methods 区别？

• computed 有缓存
• methods 每次执行都会重新算

99. computed 和 watch 区别？

• computed 产出值
• watch 监听变化做副作用

100. watch 是什么？

• 监听数据变化执行回调。

101. watch 能监听哪些源？

• ref
• reactive 对象
• getter 函数
• 多个源数组

102. watch 默认是深度监听吗？

• 不是。
• 但直接监听 reactive 对象时会递归追踪。

103. watch 的 immediate 有什么用？

• 立即执行一次回调。

104. watch 的 deep 有什么用？

• 深度监听对象内部变化。

105. watchEffect 是什么？

• 自动收集依赖的副作用监听。

106. watch 和 watchEffect 区别？

• watch 依赖明确
• watchEffect 自动收集依赖

107. watchEffect 什么时候用？

• 依赖很多且不想手动一个个声明时。

108. watch 为什么更适合精确控制？

• 可以拿到新值旧值，可控制 immediate、deep、flush。

109. flush 有什么用？

• 控制 watch 回调执行时机。

110. flush 常见值有哪些？

• pre
• post
• sync

111. watch 什么时候停止？

• 组件卸载时自动停止。
• 手动创建也可手动 stop。

112. computed 能写 setter 吗？

• 能。
• 可写成 get/set 形式。

113. 为什么 computed 不适合异步？

• 它更适合返回同步计算结果。

114. 侦听路由变化怎么做？

• watch route
• 或用路由守卫

115. onWatcherCleanup 是做什么的？

• 侦听副作用清理。
• 常用于取消请求、清除上次副作用。

六、生命周期（116-130）

116. Vue3 生命周期有哪些？

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• 还有 onActivated、onDeactivated 等

117. Vue3 生命周期和 Vue2 对应关系？

• beforeDestroy -> beforeUnmount
• destroyed -> unmounted

118. onMounted 什么时候用？

• DOM 挂载完成后。
• 常用于请求、DOM 操作、第三方库初始化。

119. onUpdated 什么时候用？

• 组件更新完成后。
• 但不要在里面乱改响应式数据。

120. onUnmounted 什么时候用？

• 组件卸载完成后。
• 常用于清理资源。

121. onBeforeUnmount 和 onUnmounted 区别？

• 一个是卸载前
• 一个是卸载后

122. keep-alive 相关生命周期有哪些？

• onActivated
• onDeactivated

123. onErrorCaptured 是什么？

• 捕获后代组件错误。

124. onRenderTracked 是什么？

• 调试渲染时依赖收集。

125. onRenderTriggered 是什么？

• 调试什么依赖触发了重新渲染。

126. onServerPrefetch 是什么？

• SSR 场景服务端预取数据。

127. setup 和 onMounted 的顺序？

• setup 先执行，再到 mounted 阶段。

128. 生命周期钩子一定要同步注册吗？

• 是。
• 要在 setup 同步阶段注册。

129. 为什么不能在异步回调里随便注册生命周期？

• 因为那时当前组件实例上下文可能已经丢了。

130. 生命周期的使用原则是什么？

• 创建期做初始化
• 挂载期做 DOM/请求
• 卸载期做清理

七、组件通信（131-145）

131. Vue3 组件通信方式有哪些？

• props
• emit
• v-model
• ref + defineExpose
• provide/inject
• Pinia

132. 父传子怎么做？

• props。

133. 子传父怎么做？

• emit。

134. 为什么 props 不能直接改？

• 单向数据流。
• 子组件直接改会破坏数据来源。

135. Vue3 的 v-model 和 Vue2 有什么区别？

• Vue3 默认是 modelValue + update:modelValue。

136. 多个 v-model 怎么做？

• 用 v-model:xxx 语法。

137. defineEmits 有什么好处？

• 事件定义更明确。
• TS 下类型更清晰。

138. 父组件怎么调用子组件方法？

• ref + defineExpose。

139. provide/inject 常见场景？

• 跨层级传值
• 组件库封装
• 祖孙通信

140. provide/inject 是响应式的吗？

• 传 ref/reactive 时可保持响应式。
• 传普通值则不是自动响应式。

141. emits 选项有什么用？

• 声明组件允许触发哪些事件。

142. attrs 和 props 区别？

• props 是显式声明的输入
• attrs 是未声明的透传属性

143. 什么是透传 attrs？

• 父组件传进来但子组件没声明成 props 的属性。

144. inheritAttrs 有什么用？

• 控制 attrs 是否自动挂到根节点。

145. 为什么 Vue3 通信更规范？

• script setup、defineProps、defineEmits 让组件接口更清晰。

八、模板、指令与渲染（146-165）

146. Vue3 模板语法和 Vue2 差很多吗？

• 不大。
• 大部分基础指令一致。

147. v-if 和 v-show 区别？

• v-if 控制渲染
• v-show 控制 display

148. v-for 为什么一定要 key？

• 帮助 diff 正确识别节点身份。

149. key 为什么别用 index？

• 容易导致错误复用。

150. Vue3 的 template ref 怎么用？

• DOM 或组件上写 ref，setup 中通过同名 ref 获取。

151. 什么是 Fragment？

• 组件可以有多个根节点，不必强制单根。

152. 什么是 Teleport？

• 把组件内容渲染到指定 DOM 节点。
• 常用于弹窗。

153. 什么是 Suspense？

• 处理异步依赖加载中的占位渲染。

154. Teleport 常见场景？

• Modal
• Drawer
• 全局浮层

155. Suspense 常见场景？

• 异步组件加载
• setup 异步依赖等待

156. slot 在 Vue3 有什么变化？

• 统一成函数式插槽。

157. 为什么函数式插槽更好？

• 依赖收集更准确。
• 性能更可控。

158. 动态组件怎么写？

• component + is。

159. keep-alive 有什么用？

• 缓存组件实例，避免重复创建。

160. Transition 是什么？

• 过渡动画组件。

161. TransitionGroup 是什么？

• 列表过渡动画组件。

162. 自定义指令在 Vue3 生命周期名字有什么变化？

• 更贴近组件生命周期，如 mounted、updated、unmounted。

163. v-model 修饰符在组件上怎么处理？

• 通过 modelModifiers 等方式接收修饰信息。

164. 模板中 ref 自动解包规则是什么？

• 顶层 ref 在模板中通常自动解包。

165. 渲染函数在 Vue3 里还重要吗？

• 重要。
• 底层封装、组件库、复杂渲染场景仍常用。

九、组件化与复用（166-180）

166. 什么是组件化？

• 把页面拆成独立可复用模块。

167. Vue3 逻辑复用为什么更好？

• 因为 composable 比 mixin 更清晰。

168. composable 常见场景有哪些？

• 请求封装
• 表单逻辑
• 滚动监听
• 权限逻辑

169. 什么是高阶组件思路？

• 通过包装组件增强能力。
• Vue 中不如 composable 常见。

170. 什么是插槽复用？

• 组件提供结构，父组件提供内容。

171. 什么是受控组件思路？

• 数据由父组件控制，子组件只负责展示和触发事件。

172. defineExpose 为什么重要？

• script setup 默认不自动暴露全部内容。

173. 组件库开发为什么喜欢 Vue3？

• 逻辑复用强、TS 好、编译能力强。

174. Vue3 异步组件怎么写？

• defineAsyncComponent。

175. defineAsyncComponent 有什么用？

• 按需加载组件，优化首屏。

176. keep-alive 的 include/exclude 有什么用？

• 控制哪些组件缓存、哪些不缓存。

177. 组件命名为什么重要？

• 影响调试、缓存匹配、团队协作。

178. 什么是递归组件？

• 组件在内部调用自己。
• 常用于树结构。

179. 递归组件要注意什么？

• 必须有终止条件。
• 否则会无限递归。

180. Vue3 组件设计核心是什么？

• 接口清晰
• 输入输出明确
• 低耦合

十、路由（181-190）

181. Vue Router 4 常和 Vue3 搭配吗？

• 是。
• Vue3 通常配 Vue Router 4。

182. createRouter 是什么？

• 创建路由实例。

183. createWebHistory 和 createWebHashHistory 区别？

• 一个是 history 模式
• 一个是 hash 模式

184. Vue3 路由懒加载怎么做？

• 路由组件写动态 import。

185. 路由守卫有哪些？

• 全局守卫
• 路由独享守卫
• 组件内守卫

186. useRoute 是什么？

• 在 setup 中获取当前路由信息。

187. useRouter 是什么？

• 在 setup 中获取路由实例。

188. setup 中怎么监听路由变化？

• watch(useRoute()) 或 watch 某个 route 字段。

189. beforeRouteLeave 常见场景？

• 离开确认
• 未保存表单提示

190. 路由 meta 常用来做什么？

• 权限
• 标题
• 缓存标记

十一、Pinia（191-200）

191. Pinia 是什么？

• Vue3 官方推荐状态管理库。

192. Pinia 相比 Vuex 好在哪？

• API 更简单
• TS 更友好
• 没有 mutations

193. defineStore 是什么？

• 定义 store 的函数。

194. Pinia 的核心概念有哪些？

• state
• getters
• actions

195. Pinia 为什么没有 mutations？

• 直接修改 state 或在 actions 中处理即可。

196. Pinia 支持模块化吗？

• 支持。
• 一个 store 就是一个天然模块。

197. Pinia 怎么做持久化？

• 配合本地存储或插件。

198. setup store 和 option store 区别？

• 一个写法更像 setup
• 一个更像传统选项式

199. storeToRefs 有什么用？

• 把 store 状态转成 ref，避免解构丢响应式。

200. Vue3 状态管理面试主线是什么？

• 为什么推荐 Pinia
• Pinia 和 Vuex 区别
• state/getters/actions
• 持久化和模块化

高频补充

• 核心主线：Proxy -> ref/reactive -> setup -> 生命周期 -> 通信 -> 路由 -> Pinia
• 高频对比：ref/reactive、watch/watchEffect、Vue2/Vue3、Pinia/Vuex
• 高频场景：Teleport、Suspense、defineExpose、storeToRefs、shallowRef