vue代碼開發技巧或者規範

1、v-for中使用:key

在操作列表渲染時，把：key屬性與v-for一起使用，可以使vue對組件狀態進行跟蹤。
使用唯一的識別符，diff算法能更高效的更新DOM。

2、v-for和v-if儘量避免在同一元素上使用

在列表渲染時常遇到元素的篩選，這時就會自然而然的把v-for和v-if結合在一起
進行使用。但是，在使用時會發現有時只需要一個或者幾個元素的值，而要去
遍歷整個列表。這樣就做了好多無用功。
遇到這種情況不妨使用computed，直接將滿足條件的元素篩選出來。

<div v-for='item in newData'>篩選後的:{{item.name}}</div>

data () {
    return {
      oldData: [
        {
          id: 1,
          name: 111
        },
        {
          id: 2,
          name: 222
        },
        {
          id: 3,
          name: 333
        }
      ]
   }
}

computed: {
    // newData: function () {
    // return this.oldData.filter(function (product) {
    newData: (vm) => {
      return vm.oldData.filter(function (product) {
        return product.id > 2
      })
    }
}

3、指令簡寫

@ 是 v-on的簡寫
: 是 v-bind 的簡寫
# 是 v-slot 的簡寫

4、組件模板props、事件問題

模板使用使用短橫線‘-’命名props、添加事件監聽。在模板中，則要使用駝峯來生命。
爲什麼要這樣生命呢？
以爲在js中使用駝峯聲明是標準，在HTML中使用短橫線生命是標準。如果使用模板時，使用了
駝峯格式，那麼在vue中則會把駝峯轉換爲短橫線式的命名方式。

// props
props: {
	detailData: {
		type: Array 
	}
}
// 模板使用
<sub-tem @btn-click='clickFn' detail-data='data'></sub-tem>

5、正確定義props、校驗props

props是用來接收來自父組件的數據。是單向數據流中重要的一環。
定義時props的類型是必須的生命的。可以是String，Array、Objec也可以是Datet等原生構造函數的一種。
使用validator函數對定義的props進行校驗。

props: {
	detailData: {
      type: Array,
      default: [1, 2],
      required: true,
      validator: function (value) {
      		// 若校驗失敗，控制檯會有警告（開發環境）
      		return value.length > 2
      }
    }
}

6、不要在created、watch中直接調用方法

在created階段調用方法的需求無非是希望組件是實例完成後立即調用的。
其實這種情況可以在 watch中實現。

具體使用查看：https://blog.csdn.net/jiuwanli666/article/details/104769467

7、單實例組件命名

單實例組件每個 頁面使用一次，且不接受任何的props。
在定義時名稱前面添加’The’來進行區別。

TheHeader.vue