前言 在我們日常代碼開發過程中，組件的使用是必不可少的，我們也會去封裝組件。但是大家寫組件的風格各式各樣，沒有一個統一的準則。而且也沒有遵循軟體開發的原則：高內聚、低耦合；因為我是給行業提供代碼的，行業給交付提供代碼。我們要儘量去減少大家的接入成本，降低接入成本的最好方案就是我們在設計組件的時候編寫 ...
前言
在我們日常代碼開發過程中，組件的使用是必不可少的，我們也會去封裝組件。但是大家寫組件的風格各式各樣，沒有一個統一的準則。而且也沒有遵循軟體開發的原則：高內聚、低耦合；因為我是給行業提供代碼的，行業給交付提供代碼。我們要儘量去減少大家的接入成本，降低接入成本的最好方案就是我們在設計組件的時候編寫好文檔，保證職責單一，不要耦合業務，就在很多程度上降低了成本了。在我們平時開發過程中，也遇到過一些組件，一個組件的實現有上千行代碼，那種組件我是直接不想看的。所以我們在開發組件的時候如果你的代碼超過了300行，那你就需要好好思考一下，是否有需要優化的了，設計是否合理，是否有重覆的代碼可以封裝等等。
大家在看這個文檔時可以先詳細閱讀一下這個文檔
組件職責單一
比如商品列表篩選條件組件，提供篩選功能，輸出一個選擇的form提供給外部組件請求列表數據。
一個很簡單的功能，為了保證組件的功能的單一，不允許其他模塊往這個組件中新增篩選條件，如果在不修改組件的情況下可以直接使用這個組件
<template>
<!--過濾器-->
<el-form
style="padding-right: 20px"
inline
class="goods-list-filter"
:model="filter"
ref="filter"
label-position="right"
label-width="120px"
>
<!-- 關鍵字搜索 -->
<el-form-item label="商品標題：" prop="itemMainTitle">
<el-input
class="w220"
placeholder="請輸入"
size="mini"
v-model.trim="filter.itemMainTitle"
@input="checkFilterParam('itemMainTitle', 80)"
/>
</el-form-item>
<!-- barcode條形碼搜索 -->
<el-form-item v-if="showBarcode" label="條形碼：" prop="barcode">
<el-input
class="w220"
placeholder="條形碼搜索"
prefix-icon="el-icon-search"
size="mini"
v-model.trim="filter.barcode"
@input="checkFilterParam('barcode', 20)"
/>
</el-form-item>
<el-form-item label="商品分類：" prop="categoryId">
<goods-category-cascader
class="w220"
:active-goods-type="goodsType"
:with-all="true"
size="mini"
v-model="filter.categoryId"
:reset-selecte="resetSelecte"
@changeRestStatus="changeRestStatus"
/>
</el-form-item>
<el-form-item label="售賣類型：" prop="saleType">
<el-select class="w220" v-model="filter.saleType" size="mini" placeholder="售賣類型">
<el-option label="全部類型" :value="null"></el-option>
<el-option label="普通售賣" :value="SaleChannel.Normal"></el-option>
<el-option label="活動售賣" :value="SaleChannel.Activity"></el-option>
</el-select>
</el-form-item>
<!-- 上下架狀態 -->
<el-form-item v-if="showStatus" prop="itemActiveStatus" label="狀態：">
<el-select class="w220" v-model="filter.itemActiveStatus" size="mini">
<el-option label="全部狀態" :value="null"></el-option>
<el-option label="啟用" :value="GoodsStatus.PullShelves"></el-option>
<el-option label="禁用" :value="GoodsStatus.RemoveShelves"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否支持退款：" prop="notAllowRefund">
<el-select class="w220" v-model="filter.notAllowRefund" size="mini" placeholder="是否支持退款">
<el-option label="全部狀態" :value="null"></el-option>
<el-option label="支持" :value="AllowRefund.Yes"></el-option>
<el-option label="不支持" :value="AllowRefund.No"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showPerformance" label="履約主體：" prop="performanceBuId">
<slot></slot>
</el-form-item>
<el-button type="primary" @click="onFilter">搜索</el-button>
<el-button v-if="!showLabel" plain @click="handleReset" style="margin-top: 2px">重置</el-button>
</el-form>
</template>
體積要小
為了不讓組件去耦合業務，要儘可能的保證組件的純粹性，如上面講到的篩選條件組件，只需要保證輸出的篩選欄位正確性，而篩選的條件的值可以由外部組件提供（如商品分類的數據），
為什麼數據要外部傳入？
這是因為一般情況下存在的篩選條件，列表也肯定會有，而有時候後端在返回數據時只返回了id，就需要我們去通過id解析出對應的name，這就需要使用到對應的數據，這個時候就可以共用數據。
這樣也可以進一步降低耦合與體積
遵循使用習慣
很多組件都有他們的慣用方法，比如表單組件會使用 v-model 來進行綁定表單值、模態框我們會使用visible 或 show() 方法來控制顯示。
遵循這些慣用方法， 可以減少開發者的心智負擔，維持介面的統一性，另外也更容易地被組合/集成(比如在 Ant-design 中 Form.Item 就依賴於這個協議)。
舉個例子，頭像選擇器：
export default {
name: 'AvatarSelect',
props: ['avatar'],
methods: {
handleSelect() {
// ...
this.$emit('avatar-change', value)
}
}
}
<avatar-select :avatar="form.avatar" @avatar-change="form.avatar = $event" />
謹防樣式污染
-
每個組件應該有一個命名空間。且這個命名空間最好避免和其他組件衝突。
<template> <div class="my-component"> ... </div> </template> <style lang="scss"> .my-component { // 下級組件樣式 } <style> -
總是開啟 Scoped CSS. 這是一種最簡便的防止污染的方式
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> -
CSS 類嵌套不要超過兩級。否則從可讀性和可維護性上都會大打折扣
.foo { .bar { .baz { // 幾百幾千行代碼 } // 幾百幾千行代碼 } } -
推薦使用 BEM 來作為CSS 類名。讓CSS 的語義和組件結構關聯起來。
.my-component { &__head {/*...*/} &__footer {/*...*/} } -
通過 class 或 style 來定製組件的樣式。不要使用直接給標簽加樣式
// ❌ <el-input /> <style> .el-input { // 樣式覆蓋 } </style> // ✅ <el-input class="my-input" /> <style> .my-input { // 樣式覆蓋 } </style>
組件擴展
由於我們是基礎產品，那提供的組件也要儘量豐富，豐富並不是說要在組件中加各種判斷，而是在職責單一、體積、耦合間權衡利弊，也可以創建同類型組件，在同一個文件index.js中export
單向數據流
-
只通過 props 向下級傳遞狀態。不要通過 ref 這類方式，過程式地去影響下級組件的狀態。
-
下級組件只通過 event 向上級通信。
-
下級組件不准修改 props 源數據。
-
遵循 v-model, update:* 協議。
-
v-model 遵循數據不可變原則。即你不能直接修改 value，而是應該創建一個新的 value。
// 假設 value 是一個列表 handleRemove(item) { const idx = this.value.indexOf(item) if (idx !== -1) { const newValue = [...this.value] newValue.splice(idx, 1) this.$emit('input', newValue) } } -
使用 computed 來衍生數據。保持源數據的純潔。
-
分離業務狀態和視圖狀態。比如列表項的激活狀態就是視圖狀態，而後端返回的數據就是業務狀態。
// 推薦 <item :checked="item.id in checked" @click="checked.add(item.id)" /> // 不推薦: 直接在源數據上添加了一個欄位，污染了原有的數據。 <item :checked="item.checked" @click="item.checked = true" />
進階篇
用 JSX 賦能 Vue
Vue 本身是完全支持 JSX 渲染的，但是大部分情況我們還是習慣或者推薦使用模板。
如果你習慣了 React 的 renderProps ，覺得 Vue 的 slot 不夠用，那麼可以上 JSX。
