第3章：Vue组件化开发核心面试题
🎯 面试问题
如何封装一个高复用性的通用组件？请结合Vue组件化思想说明。
考察点
- 组件化设计思维（职责单一、解耦）
- props验证与类型定义
- 事件通信与v-model自定义
- 插槽灵活性与默认内容
回答框架
- 需求分析：明确组件使用场景及可变部分
- 接口设计：props定义输入（含默认值、校验），emit定义输出事件
- 内容分发：使用slot预留自定义位置，提供默认插槽内容
- 状态管理：保持组件内部状态可预测，避免直接修改props
简短示例回答
以分页组件为例：通过props接收total、pageSize、currentPage等；使用emit派发change事件；默认插槽显示页码，同时提供prev/next插槽支持自定义按钮；利用v-model简化双向绑定。这样做既满足80%场景默认样式，又保留扩展性。
可能追问
- 组件内v-model与.sync修饰符区别？
- 如何实现透传attrs？
- 组件封装时如何避免样式冲突？
🎯 面试问题
Vue中props和emit的使用规范有哪些？如何确保组件通信的可维护性？
考察点
- 单向数据流原则
- props命名（camelCase vs kebab-case）
- emit事件命名规范
- 类型校验与默认值
回答框架
- 单向数据流：父组件通过props向下传值，子组件通过emit向上通知
- 命名风格：JS中使用camelCase，模板中使用kebab-case；事件名推荐kebab-case
- 类型校验：定义props类型、required、default、validator
- 避免变异：子组件不可直接修改props，若要修改应通过emit触发父组件变更
简短示例回答
例如一个自定义输入框组件：props定义value和type，并添加validator验证type值域；内部通过$emit('input', newVal)配合v-model实现双向绑定；使用时父组件监听@input事件更新数据。同时用update:modelValue语法支持Vue3的v-model新写法。
可能追问
- 如何处理多层嵌套的props透传？
- Vue2与Vue3中emit定义的区别？
- 为什么不能直接修改props？
🎯 面试问题
说说keep-alive与动态组件的配合使用场景？如何实现动态缓存控制？
考察点
- 动态组件(component组件)原理
- keep-alive的生命周期缓存机制
- include/exclude/max属性
- activated/deactivated钩子
回答框架
- 场景：Tabs切换、路由视图缓存、表单多步骤保留状态
- 实现：
<component :is="tabComponent">包裹在keep-alive内 - 动态控制：利用include绑定一个数组，通过逻辑增删组件name来控制哪些被缓存
- 性能优化：max属性限制最大缓存实例，避免内存泄漏
简短示例回答
在后台管理系统中，使用keep-alive包裹路由
可能追问
- keep-alive缓存的组件如何手动销毁？
- 为什么不缓存组件时activated也会触发？
- Vue3中keep-alive与Suspense的关系？
📁 项目案例
项目名称：企业级多模块后台管理系统
业务背景：支持10+业务角色的权限管理，页面需保持滚动位置和表单填写状态，用户频繁切换模块要求零卡顿。
规模指标：120+个功能页面，30+个动态Tab，日均PV 50万+。
技术栈：Vue 2.7 + Vue Router + Pinia + Element UI + Axios
核心难点：动态Tab切换时保持各页面状态；权限组件按角色动态渲染；避免大量缓存的组件占用内存。
面试高频追问
- 如何实现按角色动态显示菜单和组件？
- keep-alive的include动态更新时如何处理已缓存实例？
- 页面间共享状态（如搜索条件）如何设计？
- 动态组件的异步加载（Async Components）如何配合缓存？
可迁移回答话术
“在这个项目中，我们采用<keep-alive :include="cachedNames">包裹动态组件，cachedNames由Vuex（后升级为Pinia）管理。当用户关闭Tab时，我们会从数组中移除该组件name，触发destroyed钩子主动清理定时器和引用，同时将max设为10避免内存泄漏。对于权限组件，通过一个高阶函数动态生成props和事件，实现细粒度的按钮级控制。”