vue 组件名 下划线_团队Vue组件规范

在现有规则基础上，统一团队使用的Vue组件代码规范。

代码风格

变化的点：

1. 强制组件选项顺序，不允许自己随意调整。
2. 目前关闭了v-html的报错。
3. 大部分新增规则都是warning，不影响构建。

一些需要注意的Vue组件设计

Props设计

props除非必要，最好使用required而不是default。

props设计应遵旨组件设计，某个参数对外是必须required那就required，允许有默认值才使用default。

目前有一些本来设计是required结果用了default，导致线上环境有可能找不到问题所在。

而且使用required，还可以通过Vue帮助进行参数检查，而不是自己手动检查。

少用watch

一个状态可能在不同情况下会发生的不同的变化，使用watch可能会造成业务逻辑的混乱，特别使用多个watch的情况。

实际大部分情况下，使用computed/method都优于watch。

从代码阅读上watch就不如method/computed，使用后者能非常直观能看到执行顺序和逻辑。

watch更应该用于一些逻辑之外的如打日志，或当作事件监听如监听$route变化。

当然还是要根据实际情况决定。

使用html规范的命名

事件名、模板中使用组件、属性应遵循html规范，这也是vue推荐的方式，即实用小写+连线而不是驼峰。

模板逻辑要尽量简单易看

不要在模板里写太多逻辑，如果有复杂的逻辑应写在computed/methods。

每一个操作的状态都要处理好

异常、加载中、提交中等等状态的处理都要处理好并符合交互习惯(操作要有反馈)，减少DOM重绘以及用户交互的不流畅。

需要养成的编码习惯

1. 看到warning一定要修正。
2. 方法或属性下划线开头在js社区中约定表示私有属性/方法，不要乱用。
3. 理解代码是写给人看的，不是单纯给机器执行。
4. 因为js非常灵活，所以我们更需要规范约束自己，写出逻辑清晰的代码。
5. 作为前端要理解交互设计。