概述

軟件編程有一個重要的原則是 D.R.Y（Don’t Repeat Yourself），講的是盡量復(fù)用代碼和邏輯，減少重復(fù)。組件擴展可以避免重復(fù)代碼，更易于快速開發(fā)和維護。那么，擴展 Vue 組件的最佳方法是什么？

Vue 提供了不少 API 和模式來支持組件復(fù)用和擴展，你可以根據(jù)自己的目的和偏好來選擇。

本文介紹幾種比較常見的方法和模式，希望對你有所幫助。

擴展組件是否必要

要知道，所有的組件擴展方法都會增加復(fù)雜性和額外代碼，有時候還會增加性能消耗。

因此，在決定擴展組件之前，最好先看看有沒有其他更簡單的設(shè)計模式能完成目標(biāo)。

下面幾種組件設(shè)計模式通常足夠替代擴展組件了：

props 配合模板邏輯 slot 插槽 JavaScript 工具函數(shù)

props 配合模板邏輯

最簡單的方法是通過props結(jié)合模板條件渲染，來實現(xiàn)組件的多功能。

比如通過 type 屬性：MyVersatileComponent.vue

<template> <div class='wrapper'> <div v-if='type === ’a’'>...</div> <div v-else-if='type === ’b’'>...</div> <!--etc etc--> </div></template><script>export default { props: { type: String }, ...}</script>

使用組件的時候傳不同的type值就能實現(xiàn)不同的結(jié)果。

// *ParentComponent.vue*<template> <MyVersatileComponent type='a' /> <MyVersatileComponent type='b' /></template>

如果出現(xiàn)下面兩種情況，就說明這種模式不適用了，或者用法不對：

組件組合模式把狀態(tài)和邏輯分解成原子部分，從而讓應(yīng)用具備可擴展性。如果組件內(nèi)存在大量條件判斷，可讀性和可維護性就會變差。 props 和模板邏輯的本意是讓組件動態(tài)化，但是也存在運行時資源消耗。如果你利用這種機制在運行時解決代碼組合問題，那是一種反模式。slot（插槽）

另一種可避免組件擴展的方式是利用 slots（插槽），就是讓父組件在子組件內(nèi)設(shè)置自定義內(nèi)容。

// *MyVersatileComponent.vue*<template> <div class='wrapper'> <h3>Common markup</div> <slot /> </div></template>

// *ParentComponent.vue*<template> <MyVersatileComponent> <h4>Inserting into the slot</h4> </MyVersatileComponent></template>

渲染結(jié)果：

<div class='wrapper'> <h3>Common markup</div> <h4>Inserting into the slot</h4></div>

這種模式有一個潛在約束， slot 內(nèi)的元素從屬于父組件的上下文，在拆分邏輯和狀態(tài)時可能不太自然。scoped slot會更靈活，后面會在無渲染組件一節(jié)里提到。

JavaScript 工具函數(shù)

如果只需要在各組件之間復(fù)用獨立的函數(shù)，那么只需要抽取這些 JavaScript 模塊就行了，根本不需要用到組件擴展模式。

JavaScript 的模塊系統(tǒng)是一種非常靈活和健壯的代碼共享方式，所以你應(yīng)該盡可能地依靠它。MyUtilityFunction.js

export default function () { ...}

MyComponent.vue

import MyUtilityFunction from './MyUtilityFunction';export default { methods: { MyUtilityFunction }}擴展組件的幾種模式

如果你已經(jīng)考慮過以上幾種簡單的模式，但這些模式還不夠靈活，無法滿足需求。那么就可以考慮擴展組件了。

擴展 Vue 組件最流行的方法有以下四種：

Composition 函數(shù) mixin 高階組件（HOC） 無渲染組件

每一種方法都有其優(yōu)缺點，根據(jù)使用場景，或多或少都有適用的部分。

Composition API

組件之間共享狀態(tài)和邏輯的最新方案是 Composition API。這是 Vue 3 推出的 API，也可以在 Vue 2 里當(dāng)插件使用。

跟之前在組件定義配置對象里聲明data，computed，methods等屬性的方式不同，Composition API 通過一個 setup 函數(shù)聲明和返回這些配置。

比如，用 Vue 2 配置屬性的方式聲明 Counter 組件是這樣的：Counter.vue

<template> <button @click='increment'> Count is: {{ count }}, double is: {{ double }} </button><template><script>export default { data: () => ({ count: 0 }), methods: { increment() { this.count++; } }, computed: { double () { return this.count * 2; } }}</script>

用 Composition API 重構(gòu)這個組件，功能完全一樣：Counter.vue

<template><!--as above--><template><script>import { reactive, computed } from 'vue';export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }); function increment() { state.count++ } return { count, double, increment } }}</script>

用 Composition API 聲明組件的主要好處之一是，邏輯復(fù)用和抽取變得非常輕松。

進一步重構(gòu)，把計數(shù)器的功能移到 JavaScript 模塊 useCounter.js中：useCounter.js

import { reactive, computed } from 'vue';export default function { const state = reactive({ count: 0, double: computed(() => state.count * 2) }); function increment() { state.count++ } return { count, double, increment }}

現(xiàn)在，計數(shù)器功能可以通過setup函數(shù)無縫引入到任意 Vue 組件中：MyComponent.vue

<template><!--as above--></template><script>import useCounter from './useCounter';export default { setup() { const { count, double, increment } = useCounter(); return { count, double, increment } }}</script>

Composition 函數(shù)讓功能模塊化、可重用，是擴展組件最直接和低成本的方式。

Composition API 的缺點

Composition API 的缺點其實不算什么——可能就是看起來有點??攏?⑶倚碌撓梅ǘ砸恍 Vue 開發(fā)者來說有點陌生。

關(guān)于 Composition API 優(yōu)缺點的討論，推薦閱讀：When To Use The New Vue Composition API (And When Not To)

mixin

如果你還在用 Vue 2，或者只是喜歡用配置對象的方式定義組件功能，可以用 mixin 模式。mixin 把公共邏輯和狀態(tài)抽取到單獨的對象，跟使用 mixin 的組件內(nèi)部定義對象合并。

我們繼續(xù)用之前的Counter組件例子，把公共邏輯和狀態(tài)放到CounterMixin.js模塊中。CounterMixin.js

export default { data: () => ({ count: 0 }), methods: { increment() { this.count++; } }, computed: { double () { return this.count * 2; } }}

使用 mixin 也很簡單，只要導(dǎo)入對應(yīng)模塊并在mixins數(shù)組里加上變量就行。組件初始化時會把 mixin 對象與組件內(nèi)部定義對象合并。MyComponent.vue

import CounterMixin from './CounterMixin';export default { mixins: [CounterMixin], methods: { decrement() { this.count--; } }}

選項合并

如果組件內(nèi)的選項跟 mixin 沖突怎么辦？

比如，給組件定義一個自帶的increment方法，哪個優(yōu)先級更高呢？MyComponent.vue

import CounterMixin from './CounterMixin';export default { mixins: [CounterMixin], methods: { // 自帶的 `increment`` 方法會覆蓋 mixin 的`increment` 嗎？ increment() { ... } }}

這個時候就要說到 Vue 的合并策略了。Vue 有一系列的規(guī)則，決定了如何處理同名選項。

通常，組件自帶的選項會覆蓋來自 mixin 的選項。但也有例外，比如同類型的生命周期鉤子，不是直接覆蓋，而是都放進數(shù)組，按順序執(zhí)行。

你也可以通過 自定義合并策略 改變默認(rèn)行為。

mixin 的缺點

作為擴展組件的一種模式，mixin 對于簡單的場景還算好用，一旦規(guī)模擴大，問題就來了。不僅需要注意命名沖突問題（尤其是第三方 mixin），使用了多個 mixin 的組件，很難搞清楚某個功能到底來自于哪里，定位問題也比較困難。

高階組件

高階組件（HOC）是從 React 借用的概念，Vue 也能使用。

為了理解這個概念，我們先拋開組件，看看兩個簡單的 JavaScript 函數(shù)，increment和 double。

function increment(x) { return x++;}function double(x) { return x * 2;}

假設(shè)我們想給這兩個函數(shù)都加一個功能：在控制臺輸出結(jié)果。

為此，我們可以用高階函數(shù)模式，新建一個addLogging函數(shù)，接受函數(shù)作為參數(shù)，并返回一個帶有新增功能的函數(shù)。

function addLogging(fn) { return function(x) { const result = fn(x); console.log('The result is: ', result); return result; };}const incrementWithLogging = addLogging(increment);const doubleWithLogging = addLogging(double);

組件如何利用這種模式呢？類似地，我們創(chuàng)建一個高階組件來渲染Counter組件，同時添加一個decrement方法作為實例屬性。

實際代碼比較復(fù)雜，這里只給出偽代碼作為示意：

import Counter from './Counter';// 偽代碼const CounterWithDecrement => ({ render(createElement) { const options = { decrement() {this.count--; } } return createElement(Counter, options); }});

HOC 模式比 mixin 更簡潔，擴展性更好，但是代價是增加了一個包裹組件，實現(xiàn)起來也需要技巧。

無渲染組件

如果需要在多個組件上使用相同的邏輯和狀態(tài)，只是展示方式不同，那么就可以考慮無渲染組件模式。

該模式需要用到兩類組件：邏輯組件用于聲明邏輯和狀態(tài)，展示組件用于展示數(shù)據(jù)。

邏輯組件

還是回到Counter的例子，假設(shè)我們需要在多個地方重用這個組件，但是展示方式不同。

創(chuàng)建一個CounterRenderless.js用于定義邏輯組件，包含邏輯和狀態(tài)，但是不包含模板，而是通過 render函數(shù)聲明 scoped slot。

scoped slot暴露三個屬性給父組件使用：狀態(tài)count，方法increment 和計算屬性 double。CounterRenderless.js

export default { data: () => ({ count: 0 }), methods: { increment() { this.count++; } }, computed: { double () { return this.count * 2; } }, render() { return this.$scopedSlots.default({ count: this.count, double: this.double, increment: this.toggleState, }) }}

這里的scoped slot是這種模式里邏輯組件的關(guān)鍵所在。

展示組件

接下來是展示組件，作為無渲染組件的使用方，提供具體的展示方式。

所有的元素標(biāo)簽都包含在scoped slot里。可以看到，這些屬性在使用上跟模板直接放在邏輯組件里沒什么兩樣。CounterWithButton.vue

<template> <counter-renderless slot-scope='{ count, double, increment }'> <div>Count is: {{ count }}</div> <div>Double is: {{ double }}</div> <button @click='increment'>Increment</button> </counter-renderless></template><script>import CounterRenderless from './CountRenderless';export default { components: { CounterRenderless }}</script>

無渲染組件模式非常靈活，也容易理解。但是，它沒有前面那幾種方法那么通用，可能只有一種應(yīng)用場景，那就是用于開發(fā)組件庫。

模板擴展

上面的 API 也好，設(shè)計模式也罷，都有一種局限性，就是無法擴展組件的模板。Vue 在邏輯和狀態(tài)方面有辦法重用，但是對于模板標(biāo)簽就無能為力了。

有一種比較 hack 的方式，就是利用 HTML 預(yù)處理器，比如 Pug，來處理模板擴展。

第一步是創(chuàng)建一個基礎(chǔ)模板.pug文件，包含公共的頁面元素。還要包含一個block input，作為模板擴展的占位符。

BaseTemplate.pug

div.wrapper h3 {{ myCommonProp }} <!--common markup--> block input <!--extended markup outlet -->

為了能擴展這個模板，需要安裝 Vue Loader 的 Pug 插件。然后就可以引入基礎(chǔ)模板并利用block input語法替換占位部分了：MyComponent.vue

<template lang='pug'> extends BaseTemplate.pug block input h4 {{ myLocalProp }} <!--gets included in the base template--></template>

一開始你可能會認(rèn)為它跟 slot 的概念是一樣的，但是有個區(qū)別，這里的基礎(chǔ)模板不屬于任何單獨的組件。它在編譯時跟當(dāng)前組件合并，而不是像 slot 那樣是在運行時替換。

以上就是詳解Vue組件復(fù)用和擴展之道的詳細(xì)內(nèi)容，更多關(guān)于Vue組件復(fù)用和擴展的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！