前端面试：Vue3 核心

一、Vue3 核心 1. Vue2 和 Vue3 的主要区别是什么？ Vue3 使用 Proxy 实现响应式，性能和类型支持更好；引入 Composition API，更适合复杂逻辑复用；支持 Fragment、Teleport、Suspense；源码用 TypeScript 重写；打包体积和 Tree Shaking 更友好。 2. Vue3 为什么引入 Composition API？ Options API 会把同一业务逻辑拆到 data/methods/watch 里，复杂组件不好维护。Composition API 可以把相关逻辑聚合到一起，并封装成 useXxx 复用。 3. ref 和 reactive 的区别？ ref 适合基本类型，也能包对象，JS 中访问要 .value ； reactive 适合对象、数组，不需要 .value 。需要整体替换对象时更倾向 ref ，表单对象和筛选条件常用 reactive 。 4. Vue3 响应式原理是什么？ Vue3 基于 Proxy 。读取数据时通过 get 收集依赖，修改数据时通过 set 触发更新。相比 Vue2 的 Object.defineProperty ，Vue3 对新增属性、删除属性、数组变化支持更好。 5. computed 和 watch 区别？ computed 是计算派生值，有缓存，依赖不变不会重新计算； watch 是监听数据变化后执行副作用，比如请求接口、写缓存、埋点。 6. watch 和 watchEffect 区别？ watch 需要明确监听数据源，可控性强； watchEffect 会自动收集内部用到的响应式依赖，写法简单，但复杂场景不如 watch 清晰。 7. Vue3 组件通信方式有哪些？ 父子组件用 props/emits ；跨层级可用 provide/inject ；全局状态用 Pinia；也可以用 ref 调子组件方法、 v-model 双向绑定。事件总线现在不建议滥用。 8. v-if 和 v-show 区别？ v-if 是真正创建和销毁 DOM，适合不频繁切换； v-show 是 CSS display 控制，适合频繁切换。 9. key 的作用？为什么不建议用下标？ key 帮助 Vue diff 时识别节点身份，提高更新准确性。用数组下标时，列表插入、删除、排序后可能导致组件状态错乱。 10. Vue3 中如何封装可复用业务组件？ 先明确组件职责，设计好 props/emits/slots ，把业务差异通过配置传入，内部避免依赖外部页面状态。组件要处理 loading、empty、disabled、error 等边界状态。 回到目录