聊一聊 Vue 裏的組件

前言

在開發 Vue 項目時，大多數人會選擇用官方的 vue-cli 搭建項目的基礎。你們也都會使用一些組件庫，好比 element-ui，或者本身封裝一些組件。那麼在平常開發時，你們都會封裝哪些組件呢?
個人話會這樣分：
一、公共組件
    1-一、通用組件庫（如  element-ui、iView）
    1-二、業務組建（只能在這個項目使用）
二、頁面組建（爲了拆分複雜度而使用）

通用組件庫

指開源的組件庫，如 element-ui、iView，都有 table、popover、datepicker 這些經常使用的組件，使用起來開發快多了。

加分項：

1. 樣式統一風格，很美觀
2. 大而全，沒必要每一個組件都再去單獨找，還擔憂樣式不統一
3. 穩定，組件庫有足夠多的測試用例，來保證結果是正確的

業務組件

在實際項目開發中，即使使用了組件庫，仍然有大量重複的代碼，其實咱們能夠更加精簡的去開發，基於通用組件或者其它業務組件之上，再封裝一層，讓其更加方便的使用。好比在後臺管理系統中，常常會有 表格 + 分頁 這樣的組合，徹底能夠組合封裝起來。下面看個例子：

<template>
    <SelectTable
      ref="selectTable"
      url="/select/table"
      :columns="columns">
    </SelectTable>
</template>

<script>
import SelectTable from '~/SelectTable'
export default {
  components: {
    SelectTable
  },
  data() {
    return {
      columns: [{
        title: '姓名',
        key: 'name'
      }, {
        title: '年齡',
        key: 'age'
      }, {
        title: '身高',
        key: 'height',
        filter: (value) => value + 'cm'
      }, {
        title: '性別',
        key: 'sex',
        filter: (value) => value === 0 ? '女' : '男'
      }, {
        title: '地址',
        key: 'address',
        width: 400,
        render: (h, param) => {
          return <el-button size="small">{param.row.address}</el-button>
        }
      }]
    }
  }
}
</script>

上面的代碼只有 表格 + 分頁 的代碼，咱們只須要指定少許的配置，就能夠生成一個想要的頁面。
只須要指定 url (後端的接口地址) 和 columns 就能夠實現一個表格，並且還帶分頁。圖片的源碼地址

加分項：

1. 方便使用，只須要少許的配置，就能夠生成想要的頁面
2. 方便維護，只須要維護組件內部便可
3. 下降使用難度，團隊裏每一個人的水平不同，水平通常也能夠寫出蠻複雜的頁面，若是你封裝的夠簡單😁。
4. 代碼量少，越少就越不容易失誤啦，還不用擔憂使用者寫出難以理解，或者質量不高的代碼

減分項：

1. 不通用，有些須要跟好端後端的格式，纔好作封裝

若是項目裏面有多相似的頁面，我建議能夠作一些封裝，不然封裝的意義不是很大。

頁面組件

在開發複雜的頁面的時候，每每會一個頁面有不少的代碼，看起來頭都大了，這時候咱們就能夠考慮把其中的一些代碼，單獨分離出去，不至於一個頁面上千甚至上萬行代碼😂。

加分項：

1. 方便維護，把部分獨立的業務分離出去
2. 方便定位 bug，只須要保證傳進來和傳出去的參數正確，就很容易定位到問題

最後

無論怎麼說，在開發的時候，儘可能把公共的東西抽離，都是一個很是棒的選擇。各位對組件還有什麼其它見解呢？歡迎討論(￣▽￣)"。