本文共 627 字，大约阅读时间需要 2 分钟。
一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式。
1、单一原则：负责单一的页面渲染
2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等
3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复
4、可扩展：需求变动能够及时调整，不影响之前代码
5、代码逻辑清晰
6、封装的组件必须具有高性能，低耦合的特性
7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可。
1：活用组件继承2：活用slot3：使用props灵活表现界面元素4：父子拆分
1：使用computed对props进行二次封装2：css使用BEM命名3：事件以handle开头4：私有方法以_开头著名5：对外暴露类似html空间的原生属性来贴近原生行为6：常量使用const声明
【BEM: Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。】
.site-search{} /* 块 */.site-search__field{} /* 元素 */.site-search--full{} /* 修饰符 */ 转载地址：http://movii.baihongyu.com/