Vue3常见面试题都在这！从原理到实战一次讲透

terry 2天前阅读数 25 #SEO

文章标签 Vue3 面试题

面试前想快速掌握Vue3核心考点？这篇把高频问题拆解明白，从响应式原理到新特性实战，帮你理清思路、应对面试官追问～

Vue3和Vue2核心区别有哪些？

很多面试官会先问版本差异，得从响应式、开发模式、性能、新特性四个维度回答：

响应式底层：Vue2 依赖 Object.defineProperty，只能劫持对象属性，对数组（如 push/pop）、对象新增/删除属性这类场景监听不到；Vue3 改用 Proxy 直接代理整个对象，能完美覆盖数组变化、对象动态属性等场景，响应式能力更彻底。
组件开发模式：Vue2 以“选项式 API（Options API）”为主，data methods computed 等逻辑分散在不同选项中；Vue3 主推“组合式 API（Composition API）”，通过 setup 或 <script setup> 把逻辑按功能聚合，复用和维护更灵活。
性能优化：Vue3 在编译阶段做了静态提升、PatchFlags 标记等优化，运行时能跳过无关节点更新；同时借助 Tree-shaking 让未使用的 API 不打包，体积更小。
新特性补充：新增 Teleport（跨组件渲染）、Suspense（异步组件管理）、<script setup> 语法糖、defineProps/defineEmits 等，开发体验更高效。

Composition API 比 Options API 好在哪？

Options API 写组件时，逻辑分散在 data methods computed 里，大型项目容易出现“逻辑碎片化”；而 Composition API 针对性解决了这些痛点：

逻辑复用更优雅：Vue2 靠 mixins 复用逻辑，但容易出现命名冲突（多个 mixins 有相同方法会互相覆盖）、逻辑来源不明确等问题；Composition API 用“组合函数（Composables）”封装逻辑，比如写个 useRequest 封装请求逻辑，其他组件只需 import 就能复用，逻辑内聚且无冲突。
代码组织更灵活：复杂组件里，Options API 的选项是“按类型拆分”，Composition API 则是“按功能拆分”，比如用户信息模块，可把请求用户、处理表单、验证逻辑全放进一个组合函数，读代码时能快速定位功能模块。
TS 支持更友好：组合式 API 的变量、函数能直接和 TypeScript 类型推导结合，defineProps 还能通过泛型写接口约束，类型报错更及时；Options API 里 this 类型复杂，TS 支持相对薄弱。

Vue3 响应式原理怎么实现的？

这题要讲清楚 Proxy Reflect 和核心 API（reactive/ref/toRef）的作用：

Vue3 用 Proxy 代理目标对象，拦截读取（get）、修改（set）、删除（deleteProperty）等操作，配合 Reflect 保证 this 指向正确（Reflect.get(target, key, receiver) 能让对象方法里的 this 指向代理对象）。

reactive：接收对象/数组，返回深度响应式代理，但它无法直接代理基本类型（如 string/number），所以有了 ref。
ref：专门处理基本类型，内部用 { value: 原始值 } 的对象结构，通过 Proxy 劫持 value 的变化；如果传对象给 ref，内部会自动调用 reactive 转成响应式。
toRef/toRefs：toRef 把响应式对象的某个属性转成 ref，toRefs 则批量转换，比如解构响应式对象时，const { name, age } = toRefs(user) 能让 name 和 age 保持响应式（否则解构后会丢失响应式特性）。