怎么封装组件，怎么判断有没有必要
先理解原理和示例，再练习完整口述与追问。
回答要点
举表单、弹窗、上传或业务选择器的真实例子：哪些配置稳定、哪些通过事件或插槽扩展，数据由谁持有。通用组件处理展示与交互，页面组合业务流程。
原理拆解
组件封装的稳定边界通常是某种交互契约，例如弹窗草稿编辑，而不是某一张页面截图。先决定数据归属：父组件持有已保存记录，编辑组件持有独立草稿；保存时发事件或调用明确的提交协议。props 表达输入，events 表达意图，slots 表达展示扩展。组件内部的 loading、校验和重复提交保护，也需要与外部异步流程定义清楚。
示例与推演
编辑用户弹窗打开时，按 userId 初始化一份 draft；点击取消丢弃 draft，点击保存校验后 emit submit(draft)。父组件提交接口成功再关闭，失败时保留输入和错误。重新打开另一条记录必须重新初始化，不能仅在 mounted 中回填一次。若父组件还在请求详情，组件需要加载态，避免展示上一条记录。
易错点
浅拷贝只复制第一层，嵌套地址对象仍可能修改 props。不要用几十个 showXxx 参数拼出万能组件；差异是业务流程时，保留页面组合通常更清晰。
参考回答可直接练习口述
我只抽取实际重复且接口相对稳定的能力。页面负责请求和业务流程，组件通过 props 接收展示数据、通过事件通知操作，变化较大的内容用插槽。编辑组件要明确谁持有草稿、何时初始化、关闭是否丢弃、提交如何校验。只有两个页面表面相似但业务变化不同，可以先保留少量重复；确认稳定共性后再抽象，避免做成几十个开关控制的万能组件。
面试官可能继续问追问与完整解答展开收起
追问
如何回填和重置？如何避免 props 被子组件修改？两个相似页面有少量差异，复制还是抽象？
追问回答
回填基于打开动作和目标记录标识初始化草稿，重置调用统一初值工厂并清掉校验。子组件发更新事件，不直接改 props。相似页面先比较业务稳定性，少量短期重复可以接受；只有稳定共性值得抽取，差异通过明确参数或插槽表达。