本篇內(nèi)容介紹了“Vue代碼規(guī)范實例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

業(yè)務(wù)包括：企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作設(shè)計、商城系統(tǒng)網(wǎng)站開發(fā)、網(wǎng)站營銷推廣等服務(wù)，并且涵蓋域名注冊、虛擬主機(jī)、云服務(wù)器、等互聯(lián)網(wǎng)基礎(chǔ)服務(wù)；創(chuàng)新互聯(lián)聯(lián)建站以互聯(lián)網(wǎng)的創(chuàng)新理念，成熟完善的建站體系，開拓進(jìn)取的精神，專業(yè)的解決方案和顧問咨詢服務(wù)，幫助客戶在互聯(lián)網(wǎng)時代提升形象、把握商機(jī)、實現(xiàn)價值，提高企業(yè)的核心競爭力。

一、JS部分

1. 和渲染無關(guān)的數(shù)據(jù)

vue中data的數(shù)據(jù)默認(rèn)便會進(jìn)行雙向數(shù)據(jù)綁定，若是將大量的和渲染無關(guān)的數(shù)據(jù)直接放置在data中，將會浪費(fèi)雙向數(shù)據(jù)綁定時所消耗的性能，將這些和渲染無關(guān)的數(shù)據(jù)進(jìn)行抽離并配合Object.freeze進(jìn)行處理。

table中columns數(shù)據(jù)可以單獨提取一個外部js文件作為配置文件，也可以在當(dāng)前.vue文件中定義一個常量定義columns數(shù)據(jù)，因為無論如何都是固定且不會修改的數(shù)據(jù)，應(yīng)該使用Object.freeze進(jìn)行包裹，既可以提高性能還可以將固定的數(shù)據(jù)抽離，一些下拉框前端固定的數(shù)據(jù)也建議此操作。

const columnList = Object.freeze([   { title: '姓名', key: 'name', align: 'center' },   { title: '性別', key: 'gender', align: 'center' } ])

需要注意的是 Object.freeze()  凍結(jié)的是值，這時仍然可以將變量的引用替換掉，還有確保數(shù)據(jù)不會變才可以使用這個語法，如果要對數(shù)據(jù)進(jìn)行修改和交互，就不適合使用凍結(jié)了。

2. Modal框的控制

一個頁面種通常會存在很多個不同功能的彈框，若是每一個彈框都設(shè)置一個對應(yīng)的變量來控制其顯示，則會導(dǎo)致變量數(shù)量比較冗余和命名困難，可以使用一個變量來控制同一頁面中的所有Modal彈框的展示。

比如某個頁面中存在三個Modal彈框：

// bad // 每一個數(shù)據(jù)控制對應(yīng)的Modal展示與隱藏 new Vue({     data() {         return {             modal1: false,             modal2: false,             modal3: false,         }     } })  // good // 當(dāng)modalType為對應(yīng)的值時 展示其對應(yīng)的彈框 new Vue({     data() {         return {             modalType: '' // modalType值為 modal1，modal2，modal3         }     } })

3. debounce使用

例如遠(yuǎn)程搜索時需要通過接口動態(tài)的獲取數(shù)據(jù)，若是每次用戶輸入都接口請求，是浪費(fèi)帶寬和性能的。

當(dāng)一個按鈕多次點擊時會導(dǎo)致多次觸發(fā)事件，可以結(jié)合場景是否立即執(zhí)行immediate：

     {{item.label}} 

圖片功能的開發(fā)過程中，圖片的處理往往是比較容易被忽略的環(huán)節(jié)，也會在一定程度影響開發(fā)的效率和頁面的性能：

(1) 圖片壓縮問題，除非特別要求圖片必須高質(zhì)量的顯示，否則都應(yīng)該進(jìn)行對應(yīng)的壓縮處理

(2) 不同業(yè)務(wù)場景進(jìn)行圖片格式的選型：

• JPG 適用于呈現(xiàn)色彩豐富的圖片，JPG 圖片經(jīng)常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)等

• Logo、顏色簡單且對比強(qiáng)烈的圖片或背景、需要透明度等

• 將常用且變動頻率很低的小圖片進(jìn)行合并成雪碧圖，對于變動比較頻繁和小于6KB的圖片進(jìn)行base64處理

• 根據(jù)項目圖片數(shù)量和項目的用戶機(jī)型分布等，考慮采取webp進(jìn)行圖片的處理

4. 路由組件傳參

在組件中使用 $route 會使之與其對應(yīng)路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

使用 props 將組件和路由解耦：

(1) 取代與 $route 的耦合

const User = {   template: '
User {{ $route.params.id }}
' } const router = new VueRouter({   routes: [     { path: '/user/:id', component: User }   ] })

(2) 通過 props 解耦

這樣你便可以在任何地方使用該組件，使得該組件更易于重用和測試。

const User = {   props: ['id'],   template: '
User {{ id }}
' } const router = new VueRouter({   routes: [     { path: '/user/:id', component: User, props: true },      // 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：     {       path: '/user/:id',       components: { default: User, sidebar: Sidebar },       props: { default: true, sidebar: false }     }   ] })

參考：路由組件傳參

5. Vue生命周期

在父子組件中，掌握父子組件對應(yīng)的生命周期鉤子加載順序可以讓開發(fā)者在更合適的時候做適合的事情父組件

子組件：

加載時父子組件的加載順序：

home beforeCreate --> home created --> home beforeMount --> list created --> list beforeMount --> list mounted

銷毀時父子組件的銷毀順序：

home beforeDestroy --> list beforeDestroy --> list destroyed --> home destroyed

實際開發(fā)過程中會遇到當(dāng)子組件某個生命周期完成之后通知父組件，然后在父組件做對應(yīng)的處理。

emit up：

// 子組件在對應(yīng)的鉤子中發(fā)布事件 created(){   this.$emit('done') }  // 父組件訂閱其方發(fā) 

hook：

通過@hook監(jiān)聽子組件的生命周期

6. Select優(yōu)化

下拉框遍歷時，需要注意options標(biāo)簽保持同一行，若是存在換行，會導(dǎo)致選中時的值存在多余的空白

               {{item.label}}      

需要將Options和下拉框的值保持在同一行

      {{item.label}} 

7. data數(shù)據(jù)層級

data數(shù)據(jù)具有數(shù)據(jù)層級結(jié)構(gòu)，切勿過度扁平化或者嵌套層級過深，若是過度扁平化會導(dǎo)致數(shù)據(jù)命名空間沖突，參數(shù)傳遞和處理，若是層級嵌套過深也會導(dǎo)致vue數(shù)據(jù)劫持的時候遞歸層級過深，若是嵌套層級喪心病狂那種的，小心遞歸爆棧的問題。而且層級過深會導(dǎo)致數(shù)據(jù)操作和處理不便，獲取數(shù)據(jù)做容錯處理也比較繁瑣。一般層級保持2-3層最好。

若是只有一層數(shù)據(jù)，過于扁平

{     name: '',     age: '',     gender: '' }

導(dǎo)致處理不方便

// 作為接口參數(shù)傳遞 ajax({  this.name, this.age, this.gender })  // 接口獲取數(shù)據(jù)，批量處理 ajax().then(res => {  const {name, age, gender} = res.data     this.name = name     this.age = age     this.gender = gender })

適當(dāng)?shù)膶蛹壗Y(jié)構(gòu)不僅增加代碼的維護(hù)和閱讀性，還可以增加操作和處理的便捷性

{     person: { // 個人信息         name: '',         age: '',         gender: ''     } }

可以針對person進(jìn)行操作

// 作為接口參數(shù)傳遞 ajax(this.person)  // 接口獲取數(shù)據(jù)，批量處理 ajax().then(res => {  const {name, age, gender} = res.data     this.$set(this, 'person', {name, age, gender}) })

8. 策略模式

策略模式的使用，避免過多的if else判斷，也可以替代簡單邏輯的switch

const formatDemandItemType = (value) => {     switch (value) {         case 1:             return '基礎(chǔ)'         case 2:             return '高級'         case 3:             return 'VIP'     } }  // 策略模式 const formatDemandItemType2 = (value) => {     const obj = {         1: '基礎(chǔ)',         2: '高級',         3: 'VIP',     }          return obj[value] }

解構(gòu)解構(gòu)賦值以及默認(rèn)值，當(dāng)解構(gòu)的數(shù)量小于多少時適合直接解構(gòu)并賦值默認(rèn)值，數(shù)據(jù)是否進(jìn)行相關(guān)的聚合處理

const {   naem = '',   age = 10,   gender = 'man' } = res.data  // bad this.name = name this.age = age this.gender = gender  // good this.person = {   naem,   age,   gender }

9. 職責(zé)單一

任何時候盡量是的一個函數(shù)就做一件事情，而不是將各種邏輯全部耦合在一起，提高單個函數(shù)的復(fù)用性和可讀性

每個頁面都會在加載完成時進(jìn)行數(shù)據(jù)的請求并展示到頁面

created() {   this.init(); }, methods: {   // 將全部的請求行為聚合在init函數(shù)中   // 將每個請求單獨拆分   init() {     this.getList1()     this.getList2()   },   getList1() {     // to do ...   },   getList2() {     // to do ...   } }

10. v-bind

二、HTML部分

1. html書寫

編寫template模板時，屬性過多時，是否換行

2. 實體使用

html中展示一些如<，>,&等字符時，使用字符實體代替

 
   > 1 & < 12 
     
   > 1 & < 12 

三、CSS部分

1. 樣式穿透

在開發(fā)中修改第三方組件樣式是很常見，但由于 scoped 屬性的樣式隔離，可能需要去除 scoped 或是另起一個 style  。這些做法都會帶來副作用(組件樣式污染、不夠優(yōu)雅)，樣式穿透在css預(yù)處理器中使用才生效。

• less使用 /deep/

 .content /deep/ .el-button {  height: 60px; } 

• scss使用 ::v-deep

 .content ::v-deep .el-button {   height: 60px; } 

• stylus使用 >>>

 外層 >>> .custon-components{   height: 60px; } 

2. 空格

適當(dāng)?shù)目崭窨梢蕴嵘a的閱讀體驗，顯得更為優(yōu)雅和美觀

選擇器后、屬性值：

.custom-style { // 選擇器和{ 之間空格   margin: 0; // 屬性值前   transform: scale(1.5, 2.2); // 逗號之后增加空格 }

3. 換行

和html類型，當(dāng)某行的屬性很多，適當(dāng)?shù)膿Q行可以提高閱讀和美觀

.custom-style{   // 可以在一次聲明中定義一個或多個屬性   background: background-clip     background-color     background-image     background-origin     background-position     background-repeat     background-size; }

當(dāng)一個規(guī)則包含多個選擇器時，每個選擇器聲明必須獨占一行，過長導(dǎo)致需要橫向滾動閱讀剩余的內(nèi)容，應(yīng)該盡量使得閱讀順序縱向化

.custom .header .title， .other .header .title {   color: #f0f; }

4. 嵌套層級

瀏覽器在解析css時，是按照從右到左遞歸匹配的，過深的層級嵌套不僅影響性能，而且還會導(dǎo)致樣式閱讀性和代碼維護(hù)性降低，一般層架控制在5層之內(nèi)。

5. 雙引號

屬性選擇器中的值必須用雙引號包圍，不允許使用單引號，也不允許不使用引號，html的屬性值也是推薦使用雙引號，js中使用單引號：

.custom-style{ font-family: "PingFang SC", "STHeitiSC-Light"; }

6. 屬性順序

同一 規(guī)則下的屬性在書寫時，應(yīng)按功能進(jìn)行分組。并以 Formatting Model(布局方式、位置) > Box Model(尺寸)  > Typographic(文本相關(guān)) > Visual(視覺效果) 的順序書寫，以提高代碼的可讀性。

“Vue代碼規(guī)范實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！