在公司使用vue技术进行项目开发时，需要注意的规范

# vue的学习路线

1. 组件和状态管理工具 vuex

2. 脚手架 vuecli

3. 测试: 单元测试，快照测试，黑盒测试

4. 优化

5. 开发工具

6. webpack

7. typeScript

8. Nuxt.js 服务端渲染

9. Vuetify

10. NativeScript-Vue

11. 插件开发

12. 动画: 了解Vue的过渡系统

# ------------------------------------------

1. 组件命名： 多个单词的拼写，为了避免组件跟现有以及未来的HTML元素相冲突

2. 组件的数据：data必须是一个函数

3. props: prop的定义应该尽量详细,至少需要指定类型

4. 为v-for设置健值

5. 避免 v-if 和v-for 用在一起,禁止在同一个元素中使用v-if和v-for

    1. 可以考虑使用 计算属性 代替 v-if

    2. 将 v-if 移至 它的父元素中

6. 单文件组件文件的大小写 ` mycomponent -> MyComponent || my-component `

7. 基础组件名: 应用特定样式和约定的基础组件(也就是展示类,无逻辑或者无状态的组件),应该全部以一个特定的前缀开头(Base,App,V)

8. 单例组件名：只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示唯一性

    > 这不意味组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受prop，因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加prop,那就表明这实际上是一个可复用的组件,只是目前页面只使用一次

9. 紧密偶合的组件名: 和父组件紧密偶合的子组件应该以父组件名为前缀命名 ` Form -> FormItem`

10. 组件名中的单词顺序: 组件名应该以高级别的(通常是一般化描述的)单词开头,以描述性的修饰词结尾  ` ClearSearchButton -> SearchButtonClear`

11. 自闭合组件: 在单文件组件、字符串模板和JSX中没有内容的组件应该自闭合但是在DOM模板中永远不要这样做

    1. 在单文件组中 ` <MyComponent />`

    2. 在DOM模板中 ` <my-component></my-component>`

12. 模板中组件名的大小写

    1. 在单文件组中 ` <MyComponent />`

    2. 在DOM模板中 ` <my-component></my-component>`

13. JS/JSX中的组件名大小写

    > JS/JSX中的组件名应该始终是 PascalCase

14. 完整单词的组件名: 组件名应该倾向于完整单词而不是缩写

15. Prop 大小写

    > 在声明prop的时候,其命名应该始终使用 camelCase,而在模板和JSX中应该始终使用kebab-case

16. 多个 attribute 的元素: 多个attribute 的元素应该分多行撰写,每个 attribute 一行

17. 模板中简单表达式: 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或者方法,进而可以进行复用

18. 简单的计算属性: 应该把复杂的计算属性分割为尽可能多的更简单的 property

19. 带引号的 attribute 值: 非空HTML attribute 值应该始终带引号

20. 指令缩写: 指令缩写(:表示v-bind,@表示v-on,#表示v-slot)

21. 组件/实例选项顺序

    1. 副作用

        * el

    2. 全局感知(要求组件以外的知识点)

        * name

        * parent

    3. 组件类型(更换组件的类型)

        * function

    4. 模板修饰器(改变模板的编译方式)

        * delimiters

        * comments

    5. 模板依赖(模板内使用的资源)

        * components

        * directives

        * filters

    6. 组合(向选项里合并property)

        * extends

        * mixins

    7. 接口(组件的接口)

        * inheritAttrs

        * model

        * props/propsData

    8. 本地状态(本地的响应式property)

        * data

        * computed

    9. 事件(通过响应式事件触发的回调)

        * watch

        * 生命周期钩子(按照它们被调用的顺序)

            > beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> activated -> deactivated -> beforeDestroy -> destroyed

    10. 非响应式的property(不依赖响应系统的实例 property)

        * methods

    11. 渲染(组件输出的声明式描述)

        * template / render

        * renderError

22. 元素 attribute 的顺序: 元素(包括组件)的 attribute 应该有统一的顺序

    1. 定义(提供组件的选项)

        * is

    2. 列表渲染(创建多个变化的相同元素)

        * v-for

    3. 条件渲染(元素是否 渲染/显示)

        * v-if

        * v-else-if

        * v-else

        * v-show

        * v-cloak

    4. 渲染方式(改变元素的渲染方式)

        * v-pre

        * v-once

    5. 全局感知(需要超越组件的知识)

        * id

    6. 唯一的 attribute (需要唯一值的 attribute)

        * ref

        * key

    7. 双向绑定(把绑定和事件结合起来)

        * v-model

    8. 其他 attribute (所有普通的绑定或者为绑定的 attribute)

    9. 事件(组件事件监听器)

        * v-on

    10. 内容(覆写元素的内容)

        * v-html

        * v-text

23. 组件 / 实例选项中的空行: 加不加都可以

24. 单文件组件的顶级元素的顺序 <template>,<script>,<style>

25. 没有在v-if / v-else-if / v-else 中使用 key 谨慎使用

    > 如果一组 v-if + v-else-if 的元素相同,最后使用key

26. scoped 中的元素选择器 谨慎使用

    > 在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的