组件化开发与通信

Q1：请介绍 Vue 父子组件的通信方式，并说明各自适用场景。

面试官考察点：基础扎实度、理解双向绑定本质、边界处理意识。

回答框架：分两种方向——父→子用 props（单向数据流，遵循更新规则）；子→父用 $emit（自定义事件，配合 v-model 语法糖）。针对复杂表单场景可组合使用。

简短示例回答：“父组件通过 props 传递数据给子组件，子组件不可直接修改；子组件通过 $emit 触发事件通知父组件更新。例如 form 组件，父传初始值，子输入后 $emit('update:modelValue') 实现双向绑定。”

可能追问：“props 如何做类型校验和默认值？v-model 的本质是什么？子组件直接修改 props 会怎样？”

避坑提醒：避免在子组件内部修改 props；使用 .sync 修饰符时注意 Vue 2/3 差异；v-model 在 Vue 3 可绑定多个。

Q2：非父子组件之间如何通信？请对比实现方案。

面试官考察点：全局状态管理思维、团队协作规范、中大型项目架构经验。

回答框架：梳理三种典型方案——EventBus（适合低频通知，注意销毁）；Vuex/Pinia（集中状态，适合复杂业务）；provide/inject（跨层级但非响应式）。按项目规模决策。

简短示例回答：“小项目用 EventBus，注意在 beforeUnmount 时 off 事件避免内存泄漏。中大型项目推荐 Pinia，定义 store 管理共享状态，组件通过 storeToRefs 保持响应性。注意只在必要时引入全局状态。”

可能追问：“Pinia 和 Vuex 的主要区别？EventBus 性能问题如何排查？多个组件监听同一事件时如何保证顺序？”

避坑提醒：EventBus 事件名建议用 Symbol 或常量文件避免冲突；Vuex 中的 mutations 和 actions 职责不能混淆；provide 默认非响应式，需用 ref/reactive 包裹。

Q3：请解释 slot 和 provide/inject 的适用场景及响应式差异。

面试官考察点：模板复用能力、依赖注入原理、对响应式体系的理解深度。

回答框架：slot 用于模板插槽，分默认、具名、作用域三种，实现组件内容定制；provide/inject 用于祖先向任意后代传值（非响应式数据默认）。强调业务场景选择。

简短示例回答：“slot 常用于布局组件或列表项的自定义渲染，作用域插槽让子组件向父暴露数据。provide/inject 适合跨多层传递配置，如 theme 对象，但要手动转为响应式（provide('theme', ref(themeObj))）。”

可能追问：“作用域插槽的模板编译原理？provide/inject 的数据能响应式吗？如何实现？具名插槽在 Vue 2 和 Vue 3 中的语法区别？”

避坑提醒：provide/inject 建议只用在库或高阶组件中，业务代码滥用会导致依赖不透明；作用域插槽的 v-slot 缩写需要熟悉；多级嵌套时命名冲突控制。

项目名称：企业级后台管理系统组件化重构