Vue 编码规范

[强制] 组件命名

组件名为多个单词：避免跟现有的以及未来的 HTML 元素相冲突。

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

PascalCase：帕斯卡命名

与骆驼命名法类似只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写，如：

DisplayInfo();
string UserName;

kebab-case： 短横线命名

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

组件命名规则总结：
1.组件名称：首字母大小的PascalCase；引用：短横线命名的kebab-case
2.**组件名应该倾向于完整单词而不是缩写
3.紧密耦合的组件名**

[强制] 为v-for设置键值

当使用v-for渲染列表时， 需要对应的key值，以维护内部组件及其子树的状态

[强制] v-for 比 v-if 具有更高的优先级

永远不要把 v-if 和 v-for 同时用在同一个元素上，以下两种解决方法：

• 过滤列表项目：可以先把列表放在计算属性（computed）中过滤，返回过滤后的列表。
• 渲染要隐藏的列表，将 v-if 用在容器元素上（例如ul、ol）。

[强制] 为组件样式设置作用域

为避免不同组件之间css样式冲突，需在组件的样式设置作用域：scoped，不过更倾向于基于唯一的class名的策略。

[强制] 使用const和let声明变量

使用const和let来声明变量， 不要使用var

在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如

function aa() {
    if(flag) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

function aa() {
    var test // 变量提升，函数最顶部
    if(flag) {
        test = 'hello man'
    } else {
        //此处访问 test 值为 undefined
        console.log(test)
    }
    //此处访问 test 值为 undefined
  }

所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。

接下来ES6主角登场：

我们通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

function aa() {
    if(flag) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说 const

const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

const name = 'lux'
name = 'joe' // 再次赋值此时会报错

还有，如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

const student = { name: 'cc' }
    // 没毛病
    student.name = 'yy'
    // 如果这样子就会报错了
    student  = { name: 'yy' }

说说TDZ(暂时性死区)，想必你早有耳闻。

{
    console.log(value) // 报错
    let value = 'lala'
}

我们都知道，JS引擎扫描代码时，如果发现变量声明，用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明关进一个小黑屋也是TDZ(暂时性死区)，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

[强制] 使用ES6模板字符串

将ES6模板字符串替代 ES5的模板字符串

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//ES5 
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// ES5
var msg = "Hi \
    man!
    "
// ES6
const template = `<div>
      <span>hello world</span>
      </div>`

[强制] img标签的标准处理方案

<img :src="`${paramData.thumbnail}?x-oss-process=image/resize,m_lfit,w_228`"     
onerror="this.src='../assets/images/home/img_ lessons.png';this.οnerrοr=null"/>

• 使用ES6模板字符串
• 如果访问的图片存储于阿里云，处理参数请求缩略图 x-oss-process=image/resize,m_lfit,w_228
• 图片加载失败时设置默认图片

[建议] prop参数

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

多个特性的元素应该分多行撰写，每个特性一行。

[建议] 组件引用

组件引用采用懒加载方式引用

const quesDetail = () => import( './quesDetail');

[建议] 组件自闭合

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做：自闭合是刻意没有内容。

[建议] 指令缩写规则

指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

[建议] method方法命名

• ajax数据请求：以get、post开头，以data结尾

  getListData、postFormData

• 事件：事件方法以on开头

  onChangeColor、onChangeStatus

• 驼峰命名规则

[建议] vue方法放置顺序

• components（组件）
• props（组件之间的传递值）
• data（初始化数据）
• computed (计算属性，做逻辑处理)
• methods (方法)
• mounted（钩子函数，一般调用方法）

示例：

export default{
      components:{
      },
      props:[],
      data(){
        return { 
        }
     },
     computed:{ 
     }
     methods:{
     },
     mounted:{
    }
 }