目錄

• 一、善用元件讓程式碼更有條理性
• 1、 提取UI元件
• 2、按模組提取業務元件
• 3、按功能提取功能元件
• 二、利用v-bind使元件的屬性更具有可讀性
• 三、利用attrs與attrs與listeners來封裝第三方元件
• 1、$attrs
  
• 2、$listeners

前言：

近來入坑了一個專案，感覺掉進了祖傳屎山中，可讀性極差，更別說可維護性了。故藉此專欄提幾點關於Vue程式碼可讀性的建議，覺得有用的點個贊，覺得建議不合理的發表評論批評一下，有更好的建議歡迎發表評論補充一下。

一、善用元件讓程式碼更有條理性

千萬不要把一個頁面的實現程式碼都梭哈在一個.vue檔案中，除非這個頁面非常簡單，不然這個.vue檔案中的程式碼會又長又臭。

Vue提供元件的目的不僅僅是為了複用，也可以用來分割程式碼，甚至善用元件可以優化頁面的渲染更新速度。 這是因為Vue頁面渲染更新時不會去更新頁面中的元件，除非元件的props或者slot所引用的資料發生變化。

可以按以下步驟來將一個Vue頁面分割成一個個元件讓程式碼更有條理性

1、 提取UI元件

如何定義UI元件呢？個人建議按有無處理服務端資料來區分UI元件和業務元件。例如載入彈窗、二次確認彈窗、訊息提示框等等屬於UI互動元件。

將UI元件提取出來後，可以把UI互動的程式碼和業務互動的程式碼剝離開來。切記不能UI元件中寫業務程式碼，這樣UI元件將無法複用。

舉一個反例，在二次確認彈窗中新增二次確認後要處理的業務程式碼，導致UI元件將無法複用。我們可以模仿ElementUI中二次確認彈窗的呼叫來實現一個二次確認彈窗元件。

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

這樣業務程式碼可以寫在then的回撥函式中，元件的核心實現程式碼如下所示:

//confirm.vue
<template>
  <div v-show="show">
    //...
    <div @click="ok"></div>
    <div @click="cancel"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,}
  },methods: {
    ok() {
      this.show = false;
      this.resolve();
    },cancel() {
      this.show = false;
      this.resolve();
    },}
}
</script>

//index.
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';//全域性註冊二次確認彈窗confirm元件

2、按模組提取業務元件

一個頁面可以分為多個區域，比如頭部、底部、側邊欄、商品列表、成員列表等等，每個區域可以當作一個模組來提取業務元件。

3、按功能提取功能元件

按模組提取完業務元件，此時業務元件有可能還是很龐大的，故要按功能在進一步地提取功能元件。

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

過於簡單的功能不提取：

例如一個收藏的功能，只要請求一個介面就完成，類似這樣的功能不要提取。要有一定複雜度的邏輯操作的功能才提取。

功能要單一：

一個功能元件只處理一項業務。

例如一個檔案閱讀器元件，有一個需求，要求開啟檔案後自動收藏該檔案，那麼收藏邏輯程式碼要寫在哪裡呢？

或許你想都沒想就在元件中監聽檔案成功開啟的方法中寫下收藏邏輯程式碼，過一段時間後，需求改為要先新增到閱讀記錄中再點選收藏按鈕收藏，去元件中修改程式碼時發現另一個頁面也引用了這個元件，故在元件中要額外加個引數做業務場景區分，隨著需求的變化導致業務場景的疊加，元件的程式碼中會新增各種判斷邏輯，久而久之變得又長又臭，顯然這種做法是不可去。

正確的做法是在元件標籤上自定義一個事件on-fileOpen-success，用handleFileOpenSuccess函式來監聽這個事件。

<fileReader 
  @on-fileOpen-success="handleFileOpenSuccess"
>
</fileReader>

在元件中監聽檔案成功開啟的方法中執行this.$emit('on-fileOpen-success',data)觸發這個事件，其中data可以把檔案資訊傳遞出去，在handleFileOpenSuccess函式去處理收藏或者新增歷史記錄再收藏等業務互動。這種做法使檔案閱讀器元件具有單一性。

功能元件儘量少包含UI部分，UI部分用slot插槽傳入，這樣使元件更純粹，更具有複用性。

例如上傳元件的上傳圖示，不可能隨著UI設計稿的變動就往裡面新增一個上傳圖示，此時可以利用slot插槽把上傳圖示傳入。

//upload.vue
<template>
  <div>
    <slot name="icon"></slot>
  </div>
</template>

//index.vue
<template>
  <div>
    <upload>
      <template #icon>
        //上傳圖示
      </template>
    </upload>
  </div>
</template>

二、利用v-bind使元件的屬性更具有可讀性

如果想要將一個物件的所有屬性都作為prop傳入元件componentA，可以使用不帶引數的v-bind。例如，對於一個給定的物件params：

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

優化前：

<componentA :id="params.id" :name="params.name"></componentA>

優化後：

<componentA v-bind="params"></componentA>

三、利用attrs與attrs與listeners來封裝第三方元件

1、$attrs

在封裝第三方元件中，經常會遇到一個問題，如何通過封裝的元件去使用第三方元件自身的屬性和事件。

比如封裝一個elementUi元件中的Input輸入框元件myInput，當輸入錯誤的內容在輸入框下面顯示錯誤的提示。

myInput元件程式碼如下所示：

<template>
  <div>
    <el-input v-model="input"></el-input>
    <div>{{errorTip}}</div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,default: '',},errorTip: {
      type: String,data() {
    return {
    }
  },computed: {
    input: {
      get() {
        return this.value
      },set(val) {
        this.$emit('input',val)
      }
    }
  }
}
</script>

這樣呼叫myInput元件，其中errorTip為輸入框輸入錯誤的提示。

<myInput v-model=http://www.cppcns.com"input" :errorTip="errorTip"></myInput>

如果要在myInput元件上新增一個disabled屬性來禁用輸入框，要如何實現呢？一般同學會這麼做

<template>
  <div>
    <el-input v-model="input"
      :disabled="disabled"></el-input>
    <div>{{errorTip}}</div>
  </div>
</template>
<script>
export default {
  props: {
    //...
    disabled: {
      type: Boolean,default: false
    }
  },//...
}
</script>

過一段時間後又要在myInput元件上新增el-input元件其它的屬性，el-input元件總共有27個多，那該怎麼呢，難道一個個用prop傳進去，這樣做不僅可讀性差而且繁瑣，可以用$attrs一步到位，先來看一下attrs的定義。

$attrs: 包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結 (class 和 style 除外)。當一個元件沒有宣告任何prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件

v<template>
  <div>
    <el-input v-model="input"
      v-bind="$attrs"></el-input>
    <div>{{errorTip}}</div>
  </div>
</template>

這還不夠，還得把inheritAttrs選項設定為false，為什麼呢，來看一下inheritAttrs選項的定義就明白了。

預設情況下父作用域的不被認作 props 的 attribute 繫結 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。通過設定 inheritAttrs 為 false，這些預設行為將會被去掉。而通過 $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的繫結到非根元素上。注意：這個選項不影響 class 和 style 繫結。

簡單來說，把inheritAttrs設定為false，v-bind="$attrs" 才生效。

<template>
  <div>
    <el-input v-model="input"
      v-bind="$attrs"></el-input>
    <div>{{errorTip}}</div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,props: {
    value: {
      type: String,val)
      }
    }
  }
}
</script>

這樣就可以很清楚的把el-input元件的屬性和myinput元件的屬性區分開來了，元件的props選項的可讀性大大提高。

2、$listeners

那麼如何實現在myIpput元件上使用el-input元件上自定義的事件呢，可能你的第一反應是this.$emit。

<template>
  <div>
    <el-input v-model="input"
      v-bind="$attrs"
      @blur="blur">
    </el-input>
    <div>{{errorTip}}</div>
  </div>
</template>
<script>
export default {
  //...
  methods: {
    blur() {
      this.$emit('blur')
    }
  }
}
</script>

<myInput 
客棧  v-model="input"
  :errorTip="errorTip"
  @blur="handleBlur">
</myInput>

el-input元件有4個自定義事件，還不算多，假如遇到自定義事件更多的第三方元件，要怎麼辦，難道一個一個新增進去，不僅會增加一堆非必要的methods，而且可讀性差很容易和myInput自身的methods混在一起。其實可以用$listeners一步到位，先來看一下$listeners的定義。

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部元件。

<template>
  <div>
    <el-input v-model="input"
      v-bind="$attrs"
      v-on="$listeners">
    </el-input>
    <div>{{errorTip}}</div>
  </div>
</template>
<script>
export default {
  //...
}
</script>

<myInput 
  v-model="input"
  :errorTip="errorTip"
  @blur="handleBlur">
</myInput>

在myInput元件中只要在ewww.cppcns.coml-input元件上新增v-on="$listeners"，就可以在myInput元件上使用el-input元件自定義的事件。

到此這篇關於關於Vue程式碼可讀性的幾點建議的文章就介紹到這了,更多相關Vu程式設計客棧e程式碼可讀性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！