一定要這樣做的

1 .組件名應(yīng)該始終是多個單詞的，根組件app除外，因為所有的HTML元素名稱都是單個單詞，避免和未來的html元素沖突
2 .定義詳細(xì)的prop
3 .總是用key配合v-for，一邊維護(hù)內(nèi)部組件極其子組件樹的狀態(tài)，甚至在元素上維護(hù)可預(yù)測的行為，比如動畫中的對象固話。
4 .永遠(yuǎn)不要把v-if和v-for用在一起就是同一個元素上面。
5 .為組件樣式設(shè)置作用域。頂級app的布局樣式可以是全局的，但是其他所有的組件都應(yīng)該是有作用域的，可以使用scoped特性，也可以使用BEM策略。對于組件庫，我們應(yīng)該選用class的策略，這樣可以復(fù)寫內(nèi)部樣式更加容易。

1 .對于組件庫來說更應(yīng)該使用基于class的策略而不是scoped特性
2 .使用了常人可以理解的class名字且沒有太高的選擇器優(yōu)先級，不會導(dǎo)致沖突
3 .使用唯一的class名可以幫助你確保那些三方庫的css不會運(yùn)用到你自己的html上，許多攻城都使用了button,btn,icon calss名，所以即使你不適用類似BEM的策略，添加一個組件專屬前綴，可以很好的保護(hù)你的組件樣式
4 .

6 .在插件，混入等擴(kuò)展中始終為自定義的私有屬性使用命名空間函數(shù)名

強(qiáng)烈推薦這樣做的（增強(qiáng)可讀性）

1 .使用一次的組件，不傳prop的組件以the開頭命名
2 .和父組件緊密耦合的子組件應(yīng)該以父組件名作為開頭前綴
3 .Prop名大小寫：聲明的時候使用駝峰式，而在模板和jsx中使用kebab-case。組件名也要按照這個來寫

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

4 .復(fù)雜的計算屬性分割為盡可能多的簡單屬性

1 .便于測試，當(dāng)每個計算屬性都包含一個非常簡單和很少依賴的表達(dá)式的時候，撰寫測試保證其正確工作是非常容易的
2 .易于閱讀：簡化計算屬性要求你為每一個值都起一個描述性的名稱
3 .需求變更的時候更加方便

5 .指令縮寫：指令縮寫要么都用，要么都不用
6 .完整單詞的組件名：組件名字應(yīng)該傾向于完整單詞而不是縮寫，瀏覽器的自動補(bǔ)全讓書寫長命名的代價非常之低，而帶來的明確性確實非常寶貴的，不常用的縮寫應(yīng)該盡量避免
7 .

推薦這樣做的

1 .單文本組件總是template,script,style（style要放在最后面，前面兩個是必須都有的）
2 .在v-if/v-if-else/v-else中使用key。相同元素在切換的時候，會自動修補(bǔ)已存在的元素，而不是將舊的元素移除然后在統(tǒng)一位置提添加一個新的元素，如果本不相同的元素識別為相同，會出現(xiàn)意料之外的副作用
3 .在scoped中應(yīng)該避免使用元素選擇器。類選擇器總是比元素選擇器更好，大量的使用元素選擇器是很慢的

1 .

4 .使用Vuex來管理全局狀態(tài)，而不是通過this.$root或一個全局事件總線，雖然前者更加方便和簡單。但是后這更加規(guī)范，可以組織，追蹤和調(diào)試狀態(tài)變更
5 .script腳本里面的順序

1 .el
2 .全局感知 name,parent
3 .組件類型 functional
4 .模板修改器 delimiters,comments 改變模板的編譯方式
5 .模板依賴 components,filters,directives
6 .組合 extends,mixxins
7 .接口 inferitAttrs,model,props,propsData
8 .本地狀態(tài) data,computed
9 .事件 watch,生命周期鉤子
10 .非響應(yīng)式的屬性 methods
11 .渲染 組件輸出的聲明式描述 template,render ,renderError

6 .組件的特性順序

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 .唯一特性 ref,key,slot
7 .雙向綁定 v-model
8 .其他特性 所有普通的綁定或未綁定的特性
9 .事件 v-on事件
10 .內(nèi)容 v-html,v-text
11 .

7 .

避免出現(xiàn)

1 .沒有在v-if/v-else-if,v-else 中使用key

1 .默認(rèn)情況下，vue會盡可能高效的更新dom。這意味著同類型的元素之間切換時，會修補(bǔ)已存在的元素，而不是將舊的元素移除，然后在一個同一個位置添加一個新的元素
2 .如果本不相同的元素被識別未相同，會出現(xiàn)意料之外的結(jié)果。
3 .特別是人為的刪除其中一個元素的時候

2 .scoped中避免出現(xiàn)元素選擇器。所有css都是使用類選擇器，而且scoped中大量的元素和特性組合的選擇器將會比類合特性選擇器慢。但是我覺得單獨的類選擇器因該是最快的
3 .隱性的父子通信

1 .組件引入命名規(guī)范v-組件名字，避免報錯Do not use built-in or reserved HTML elements as component id: Line
2 .不要改變props傳下來的數(shù)值 Avoid mutating a prop directly since the value will be overwritten whenever