Vue.js 是一套構建使用者介面的漸進式框架。我們可以使用簡單的 API 來實現響應式的資料繫結和組合的檢視元件。

從維護檢視到維護資料，Vue.js 讓我們快速地開發應用。但隨著業務程式碼日益龐大，元件也越來越多，元件邏輯耦合嚴重，使程式碼維護變得十分困難。

同時，Vue.js 的介面和語法十分自由，實現同一功能有若干種方法。每個人解決問題的思路不一樣，寫出來的程式碼也就不一樣，缺乏團隊內的規範。

本文旨在從元件開發的不同方面列舉出合理的解決方法，作為建立元件規範的一個參考。

導航

• 構成元件
• 元件間通訊
• 業務無關
• 名稱空間
• 上下文無關
• 資料扁平化
• 使用自定義事件實現資料的雙向繫結
• 使用自定義 watcher 優化 DOM 操作
• 專案骨架

構成元件

元件，是一個具有一定功能，且不同元件間功能相對獨立的模組。元件可以是一個按鈕、一個輸入框、一個視訊播放器等等。

可複用元件，高內聚、低耦合。

那麼，什麼構成了元件呢。以瀏覽器的原生元件 video 為例，分析一下元件的組成部分。

<video
  src="example.mp4"
  width="320"
  height="240"
  onload="loadHandler"
  onerror="errorHandler">
  Your browser does not support the video tag.
</video>

例項中能看出，元件由狀態

在 Vue 元件中，狀態稱為 props，事件稱為 events，片段稱為 slots。元件的構成部分也可以理解為元件對外的介面。良好的可複用元件應當定義一個清晰的公開介面。

• Props 允許外部環境傳遞資料給元件
• Events 允許元件觸發外部環境的副作用
• Slots 允許外部環境將額外的內容組合在元件中。

使用 vue 對 video 元件做拓展，構造出一個支援播放列表的元件 myVideo：

<my-video
  :playlist="playlist"
  width="320"
  height="240"
  @load="loadHandler"
  @error="errorHandler"
  @playnext="nextHandler"
  @playprev="prevHandler">
  <div slot="endpage"></div>
</my-video>

myVideo 元件有著清晰的介面，接收播放列表、播放器寬高等狀態，能夠觸發載入成功或失敗、播放上一個或下一個的事件，並且能自定義播放結束時的尾頁，可用於插入廣告或顯示下一個視訊資訊。

元件間通訊

在 Vue.js 中，父子元件的關係可以總結為 props down, events up 。父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息。看看它們是怎麼工作的。

業務無關

命名

元件的命名應該跟業務無關。應該依據元件的功能為元件命名。

例如，一個展示公司部門的列表，把每一項作為一個元件，並命名為 DepartmentItem。這時，有一個需求要展示團隊人員列表，樣式跟剛剛的部門列表一樣。顯然，DepartmentItem 這個名字就不適合了。

因此，可複用元件在命名上應避免跟業務扯上關係，以元件的角色、功能對其命名。Item、ListItem、Cell。可以參考 Bootstrap、ElementUI 等一些 UI 框架的命名。

業務資料無關

可複用元件只負責 UI 上的展示和一些互動以及動畫，如何獲取資料跟它無關，因此不要在元件內部去獲取資料，以及任何與服務端打交道的操作。可複用元件只實現 UI 相關的功能。

元件職責

約束好元件的職責，能讓元件更好地解耦，知道什麼功能是元件實現的，什麼功能不需要實現。

元件可以分為通用元件（可複用元件）和業務元件（一次性元件）。

可複用元件實現通用的功能（不會因元件使用的位置、場景而變化）：

• UI 的展示
• 與使用者的互動（事件）
• 動畫效果

業務元件實現偏業務化的功能：

• 獲取資料
• 和 vuex 相關的操作
• 埋點
• 引用可複用元件

可複用元件應儘量減少對外部條件的依賴，所有與 vuex 相關的操作都不應在可複用元件中出現。

元件應當避免對其父元件的依賴，不要通過 this.$parent 來操作父元件的示例。父元件也不要通過 this.$children 來引用子元件的示例，而是通過子元件的介面與之互動。

名稱空間

可複用元件除了定義一個清晰的公開介面外，還需要有名稱空間。名稱空間可以避免與瀏覽器保留標籤和其他元件的衝突。特別是當專案引用外部 UI 元件或元件遷移到其他專案時，名稱空間可以避免很多命名衝突的問題。

<xl-button></xl-button>
<xl-table></xl-table>
<xl-dialog></xl-dialog>
...

業務元件也可以有命令空間，跟通用元件區分開。這裡用 st (section) 來代表業務元件。

<st-recommend></st-recommend>
<st-qq-movie></st-qq-movie>
<st-sohu-series></st-sohu-series>

上下文無關

還是上面那句話，可複用元件應儘量減少對外部條件的依賴。沒有特別需求且單個元件不至於過重的的前提下，不要把一個有獨立功能的元件拆分成若干個小元件。

<table-wrapper>            
  <table-header slot="header" :headers="exampleHeader"></table-header>            
  <table-body slot="body" :body-content="exampleContents"></table-body>          
</table-wrapper>

TableHeader 元件和 TableBody 元件依賴當前的上下文，即 TableWrapper 元件巢狀的環境下。你可以有更好的解決辦法：

<xl-table :headers="exampleHeader" :body-content="exampleContents"></xl-table>

上下文無關原則能夠降低元件使用的門檻。

資料扁平化

定義元件介面時，儘量不要將整個物件作為一個 prop 傳進來。

<!-- 反例 -->
<card :item="{ title: item.name, description: item.desc, poster: item.img }></card>

每個 prop 應該是一個簡單型別的資料。這樣做有下列幾點好處：

• 元件介面清晰
• props 校驗方便
• 當服務端返回的物件中的 key 名稱與元件介面不一樣時，不需要重新構造一個物件

<card
  :title="item.name"
  :description="item.desc"
  :poster="item.img">
</card>

扁平化的 props 能讓我們更直觀地理解元件的介面。

使用自定義事件實現資料的雙向繫結

有時候，對於一個狀態，需要同時從元件內部和元件外部去改變它。

例如，模態框的顯示和隱藏，父元件可以初始化模態框的顯示，模態框元件內部的關閉按鈕可以讓其隱藏。一個好的辦法是，使用自定義事件改變父元件中的值：

<modal :show="show" @showchange="show = argument[0]"></modal>

<!-- Modal.vue -->

<template>
  <div v-show="show">
    <h3>標題</h3>
    <p>內容</p>
    <a href="javascript:;" @click="close">關閉</a>
  </div>
</template>

<script>
  export default {
    props: {
      show: String
    },
    methods: {
      close () {
        this.$emit('input', false)
      }
    }
  }
</script>

使用者點選關閉按鈕時，Modal 元件傳送一個 input 自定義事件給父元件。父元件監聽到 input 事件時，把 show 設定為事件回撥的第一個引數。

特別地，當狀態名稱為 value，事件名稱為 input 時，可以使用 v-model 指令語法糖：

<modal :value="show" @input="show = argument[0]"></modal>

等價於

<modal v-model="show"></model>

要讓元件的 v-model 生效，它必須：

• 接受一個 value 屬性
• 在有新的 value 時觸發 input 事件

注意：由於每個元件的 input 事件只能用來對一個數據進行雙向繫結，所以當存在多個需要向上同步的資料時，請不要使用 v-model，請使用多個自定義事件，並在父元件中同步新的值。

<modal
  :show="show" @showchange="show = argument[0]"
  :content="content" @contentchange="content = argument[0]">
</model>

使用自定義 watcher 優化 DOM 操作

在開發中，有些邏輯無法使用資料繫結，無法避免需要對 DOM 的操作。例如，視訊的播放需要同步 Video 物件的播放操作及元件內的播放狀態。可以使用自定義 watcher 來優化 DOM 的操作。

<!-- MyVideo.vue -->

<template>
  <div>
    <video ref="video" src="src"></video>
    <a href="javascript:;" @click="togglePlay">{{ playing ? '暫停' : '播放' }}</a>
  </div>
</template>

<script>
  export default {
    props: {
      src: String // 播放地址
    },
    data () {
      return {
        playing: false // 是否正在播放
      }
    },
    watch: {
      // 播放狀態變化時，執行對應操作
      playing (val) {
        let video = this.$refs.video
        if (val) {
          video.play();
        } else {
          video.pause();
        }
      }
    },
    method: {
      // 切換播放狀態
      togglePlay () {
        this.playing = !this.playing
      }
    }
  }
</script>

示例中，自定義 watcher 在監聽到 playing 狀態變化時，會執行播放或暫停操作。遇到對視訊播放狀態的處理時，只需要關注 playing 狀態即可。

專案骨架

單元件不異過重，元件在功能獨立的前提下應該儘量簡單，越簡單的元件可複用性越強。當你實現元件的程式碼，不包括CSS，有好幾百行了（這個大小視業務而定），那麼就要考慮拆分成更小的元件。

當元件足夠簡單時，就可以在一個更大的業務元件中去自由組合這些元件，實現我們的業務功能。因此，理想情況下，元件的引用層級，只有兩級。業務元件引用通用元件。

我們可以得到一個扁平化的結構。

在一個龐大的專案當中，元件間的引用關係會更復雜一些。當單頁應用有多個路由，每個路由元件過重，需要拆分模組時。元件結構會變成下圖這樣。

按照這個思路構建我們的專案，最後的原始碼目錄結構（不包括構建流程檔案）：

│  App.vue          # 頂級元件
│  client-entry.js  # 前端入口檔案
│  config.js        # 配置檔案
│  main.js          # 主入口檔案
│  
├─api               # 介面 API
├─assets            # 靜態資源
├─components        # 通用元件
├─directives        # 自定義指令
├─mock              # Mock 資料
├─plugins           # 自定義外掛
├─router            # 路由配置
├─sections          # 業務元件
├─store             # Vuex Store
├─utils             # 工具模組
└─views             # 路由頁面元件

在通用元件中還可以區分容器元件、佈局元件和其他功能性元件等。

轉載：http://www.jianshu.com/p/79a37137e45d

個人建了前端學習群，旨在一起學習前端。純淨、純粹技術討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。