【Vuejs】1163- 3 個(gè)簡(jiǎn)單的技巧讓你的 Vue 代碼更優(yōu)雅

作者：紅塵煉心

https://juejin.cn/post/7005751368937897991

前言

近來(lái)入坑了一個(gè)Vue項(xiàng)目，感覺(jué)掉進(jìn)了祖?zhèn)魇荷街校勺x性極差，更別說(shuō)可維護(hù)性了。故借此專欄提幾點(diǎn)關(guān)于Vue代碼可讀性的建議，覺(jué)得有用的點(diǎn)個(gè)贊，覺(jué)得建議不合理的發(fā)表評(píng)論批評(píng)一下，有更好的建議歡迎發(fā)表評(píng)論補(bǔ)充一下。

一、善用組件讓代碼更有條理性

千萬(wàn)不要把一個(gè)頁(yè)面的實(shí)現(xiàn)代碼都梭哈在一個(gè).vue文件中，除非這個(gè)頁(yè)面非常簡(jiǎn)單，不然這個(gè).vue文件中的代碼會(huì)又長(zhǎng)又臭。

Vue提供組件的目的不僅僅是為了復(fù)用，也可以用來(lái)分割代碼，甚至善用組件可以優(yōu)化頁(yè)面的渲染更新速度。這是因?yàn)閂ue頁(yè)面渲染更新時(shí)不會(huì)去更新頁(yè)面中的組件，除非組件的props或者slot所引用的數(shù)據(jù)發(fā)生變化。

可以按以下步驟來(lái)將一個(gè)Vue頁(yè)面分割成一個(gè)個(gè)組件讓代碼更有條理性

1.1、提取UI組件

如何定義UI組件呢？個(gè)人建議按有無(wú)處理服務(wù)端數(shù)據(jù)來(lái)區(qū)分UI組件和業(yè)務(wù)組件。例如加載彈窗、二次確認(rèn)彈窗、消息提示框等等屬于UI交互組件。

將UI組件提取出來(lái)后，可以把UI交互的代碼和業(yè)務(wù)交互的代碼剝離開(kāi)來(lái)。切記不能UI組件中寫(xiě)業(yè)務(wù)代碼，這樣UI組件將無(wú)法復(fù)用。

舉一個(gè)反例，在二次確認(rèn)彈窗中添加二次確認(rèn)后要處理的業(yè)務(wù)代碼，導(dǎo)致UI組件將無(wú)法復(fù)用。我們可以模仿ElementUI中二次確認(rèn)彈窗的調(diào)用來(lái)實(shí)現(xiàn)一個(gè)二次確認(rèn)彈窗組件。

this.$confirm(message,?title,?options)
??.then(res?=>{})
??.catch(err?=>{})

這樣業(yè)務(wù)代碼可以寫(xiě)在then的回調(diào)函數(shù)中，組件的核心實(shí)現(xiàn)代碼如下所示:

//confirm.vue

//index.js
import?Vue?from?'vue';
import?options?from?'./confirm.vue';
const?Confirm?=?Vue.extend(options);
let?confirm?=?undefined;
const?ConfirmInit?=?(options?=?{})?=>?{
??return?new?Promise((resolve,?reject)?=>?{
????options.resolve?=?resolve;
????options.reject?=?reject;
????confirm?=?new?Confirm({
??????el:?document.createElement('div'),
??????data:?options
????})
????document.body.appendChild(confirm.$el);
????Vue.nextTick(()?=>?{
??????if?(confirm)?confirm.show?=?true;
????})
????return?confirm;
??})
}
Vue.prototype.$confirm?=?ConfirmInit;

//main.js
import?'components/confirm/index.js';//全局注冊(cè)二次確認(rèn)彈窗confirm組件

1.2、按模塊提取業(yè)務(wù)組件

一個(gè)頁(yè)面可以分為多個(gè)區(qū)域，比如頭部、底部、側(cè)邊欄、商品列表、成員列表等等，每個(gè)區(qū)域可以當(dāng)作一個(gè)模塊來(lái)提取業(yè)務(wù)組件。

1.3、按功能提取功能組件

按模塊提取完業(yè)務(wù)組件，此時(shí)業(yè)務(wù)組件有可能還是很龐大的，故要按功能在進(jìn)一步地提取功能組件。

功能有大有小，提取要注意把握幾個(gè)原則：

• 過(guò)于簡(jiǎn)單的功能不提取

  例如一個(gè)收藏的功能，只要請(qǐng)求一個(gè)接口就完成，類似這樣的功能不要提取。要有一定復(fù)雜度的邏輯操作的功能才提取。

• 功能要單一，一個(gè)功能組件只處理一項(xiàng)業(yè)務(wù)。

  例如一個(gè)文件閱讀器組件，有一個(gè)需求，要求打開(kāi)文件后自動(dòng)收藏該文件，那么收藏邏輯代碼要寫(xiě)在哪里呢？

  或許你想都沒(méi)想就在組件中監(jiān)聽(tīng)文件成功打開(kāi)的方法中寫(xiě)下收藏邏輯代碼，過(guò)一段時(shí)間后，需求改為要先添加到閱讀記錄中再點(diǎn)擊收藏按鈕收藏，去組件中修改代碼時(shí)發(fā)現(xiàn)另一個(gè)頁(yè)面也引用了這個(gè)組件，故在組件中要額外加個(gè)參數(shù)做業(yè)務(wù)場(chǎng)景區(qū)分，隨著需求的變化導(dǎo)致業(yè)務(wù)場(chǎng)景的疊加，組件的代碼中會(huì)添加各種判斷邏輯，久而久之變得又長(zhǎng)又臭，顯然這種做法是不可去。

  正確的做法是在組件標(biāo)簽上自定義一個(gè)事件on-fileOpen-success，用handleFileOpenSuccess函數(shù)來(lái)監(jiān)聽(tīng)這個(gè)事件。

  ??@on-fileOpen-success="handleFileOpenSuccess"
  >
  
  

  在組件中監(jiān)聽(tīng)文件成功打開(kāi)的方法中執(zhí)行this.$emit('on-fileOpen-success',data)觸發(fā)這個(gè)事件，其中data可以把文件信息傳遞出去，在handleFileOpenSuccess函數(shù)去處理收藏或者添加歷史記錄再收藏等業(yè)務(wù)交互。這種做法使文件閱讀器組件具有單一性。

• 功能組件盡量少包含UI部分，UI部分用slot插槽傳入，這樣使組件更純粹，更具有復(fù)用性。

  例如上傳組件的上傳圖標(biāo)，不可能隨著UI設(shè)計(jì)稿的變動(dòng)就往里面添加一個(gè)上傳圖標(biāo)，此時(shí)可以利用slot插槽把上傳圖標(biāo)傳入。

  //upload.vue
  
  

  //index.vue
  
  ????
  ??

params:?{
??id:?1,
??name:?'vue'
}

"params.id"?:name="params.name">

"params">

"input"?:errorTip="errorTip">

??v-model="input"
??:errorTip="errorTip"
??@blur="handleBlur">

??v-model="input"
??:errorTip="errorTip"
??@blur="handleBlur">