组件封装原则：纯属娱乐

一、高内聚，低耦合（一家之言，容易造成过度封装）

1. 出入props不能被修改，交给父组件处理：emit
2. 组件内部业务逻辑不依赖外部使用者,差异通过props【不能相互依赖】
3. 组件内部不要依赖vuex/pinia等状态管理【业务组件除外】
4. 约定优先于配置，降低组件使用复杂度【复杂逻辑放入组件内部】

二、组件单一职责（感觉就是简单组件）

1. 组件的命名要与组件的职责相关
2. 多开发纯函数组件
3. 复杂组件可拆分多个纯组件组合使用

三、业务相关组件（请求、业务逻辑、需求等相关的组件）

1. 业务处理放入组件内部，方便直接使用
2. 副作用：需要对组件内部引起副作用的接口、方法等做特殊处理

四、props使用（合理使用）

1. 命名语义化
2. 明确参数：选填、必填

五、可维护、可拓展（万一摊到自己身上呢？）

1. 命名规范、html标签语义化清晰、css规范，代码逻辑清晰
2. slot/props/组件拆分等
3. 防止滥用：vue3响应式数据【reactive/ref...】