Vue 常见问题与高级面试题整理
1. vue中组件的data为什么是一个函数？
- 组件复用时，每个实例都能返回独立的数据对象，避免数据污染。
- 如果 data 是对象，所有组件实例会共享同一个数据源，导致互相影响。
示例：
export default {
data() {
return { count: 0 }
}
}
2. 父子组件通信方式有哪些？
- props（父传子）
- $emit（子传父）
- $refs
- provide/inject（跨级）
- Vuex/Pinia（全局状态管理）
- EventBus（Vue2，Vue3推荐 mitt）
3. Vue响应式原理是什么？Vue2和Vue3有何区别？
- Vue2：Object.defineProperty，只能监听已有属性，数组和对象新增属性需特殊处理。
- Vue3：Proxy，可监听所有属性变化，性能更高，代码更简洁。
4. v-if 和 v-show 区别？
- v-if 是条件渲染，真正移除/添加 DOM 元素，适合不频繁切换场景。
- v-show 只是切换 display 样式，适合频繁显示/隐藏场景。
5. 组件生命周期有哪些？常见应用场景？
- created：数据初始化、请求接口
- mounted：操作 DOM、第三方库初始化
- updated：数据变化后处理
- destroyed/unmounted：清理定时器、解绑事件
6. 如何实现自定义指令？常见场景？
- Vue2：Vue.directive('focus', {...})
- Vue3：app.directive('focus', {...})
- 常见场景：自动聚焦、权限控制、懒加载等
7. 如何优化大型列表渲染性能？
- 使用虚拟滚动（如 vue-virtual-scroller）
- v-show 替代 v-if
- 分页加载、懒加载
- key 合理设置，避免 index
8. Vue3 组合式 API 有哪些优势？
- 逻辑复用更简单（自定义组合函数）
- 更好支持 TypeScript
- 代码组织更灵活，易维护
9. Vue 项目如何做权限管理？
- 路由守卫（beforeEach）
- 指令控制按钮显示
- 后端接口鉴权
10. Vue 项目常见性能优化点？
- 路由懒加载
- 组件按需加载
- 图片懒加载
- 使用 keep-alive
- 合理拆分组件
- 使用 v-once、v-memo
- 使用 computed 和 watch 优化数据处理
- 合理拆分 store，避免全局状态过大
- 使用异步组件和 Suspense
11. Vue diff 算法原理及优化
- Vue2：同层递归比较，性能一般
- Vue3：双端比较+最长递增子序列（LIS），性能更高，移动节点更少
12. Vue SSR 原理及应用场景
- SSR（服务端渲染）用于 SEO 和首屏性能优化
- 原理：服务端生成 HTML，客户端激活为可交互应用
13. Vue 路由常见问题
- 动态路由如何实现？
- 路由懒加载怎么做？
- 路由守卫有哪些？如何做鉴权？
- 如何实现嵌套路由和命名视图？
14. Vue 状态管理相关问题
- Vuex 和 Pinia 有什么区别？
- 如何模块化管理 store？
- 如何在组件中高效使用状态管理？
15. Vue3 新特性相关问题
16. 组件设计与复用
- 如何设计高复用组件？
- 组件库如何按需加载？
- 组件通信和解耦的最佳实践？
17. 高级面试题举例（详细答案）
1. Vue3 响应式原理源码简述
- Vue3 使用 Proxy 代理对象，实现响应式。通过拦截 get/set/delete 操作，自动收集依赖和触发视图更新。相比 Vue2 的 Object.defineProperty，Proxy 能监听所有属性变化，包括新增、删除和数组索引变化，性能更高。
2. diff 算法优化点和实际应用场景
- Vue2 diff 算法采用同层递归比较，性能一般。Vue3 重写 diff，采用双端比较和最长递增子序列（LIS）优化，减少 DOM 操作，提升大数据量和复杂场景下的性能，适合复杂列表和频繁节点移动场景。
3. 组合式 API 与选项式 API 如何混用
4. Vue3 Teleport、Suspense 实现原理
- Teleport：允许组件内容渲染到 DOM 的任意位置，适合弹窗、全局提示等场景。原理是将虚拟 DOM 挂载到指定容器节点。
- Suspense：用于异步组件加载，支持 fallback 占位内容。原理是等待异步内容 resolve 后再渲染，提升用户体验。
5. 如何设计一个高复用的业务组件库
- 采用 props、slots、事件实现灵活扩展。
- 提供类型声明和文档，支持按需加载。
- 组件解耦，逻辑复用可用组合式 API。
- 统一风格和主题，支持国际化和定制化。
6. SSR 原理及实现方式
- SSR（服务端渲染）在服务端生成 HTML，客户端激活为可交互应用。提升首屏性能和 SEO。实现方式：使用 vue-server-renderer 或 Vue3 的 @vue/server-renderer，结合 Node.js 服务端输出 HTML。
7. Vue3 如何支持多端适配（Web、Native、SSR）
- 通过虚拟 DOM 和响应式系统，Vue3 可适配 Web、Native（如 uni-app、Weex）、SSR。不同平台实现不同渲染器，业务逻辑可复用，渲染层按需适配。
8. Vue3 性能优化实践与原理
- 路由懒加载、组件按需加载、图片懒加载、虚拟列表、keep-alive、v-once、v-memo、computed 优化数据处理、合理拆分 store、异步组件和 Suspense 等。
- 原理：减少不必要的渲染和 DOM 操作，提升响应速度。
9. Vue3 生命周期钩子和使用场景
- onMounted：初始化 DOM、第三方库。
- onUpdated：数据变化后处理。
- onUnmounted：清理定时器、解绑事件。
- onErrorCaptured：捕获子组件错误。
- onActivated/onDeactivated：keep-alive 组件激活/失活。
10. Vue3 如何做类型安全和 TS 支持
- Vue3 源码和 API 原生支持 TypeScript。
11. Vue3 如何做异步组件和错误处理
- 异步组件：使用 defineAsyncComponent 或 Suspense 组件，支持 loading 和 error fallback。
- 错误处理：onErrorCaptured 生命周期钩子捕获子组件错误，统一处理异常和展示错误信息
更多内容可参考官方文档和社区资源，保持学习和实践，提升 Vue.js 开发技能。