Mixins

Mixin物件能夠使用元件的任何屬性（data，mounted，created，update等），而且當元件使用mixin時，這個mixin的所有資訊也會混合到這個元件裡，這個元件就能夠訪問到所有mixin的屬性就像申明在自己物件中一樣。

沿用 《Vue 3.0 特性指南（一） - 為什麼要引入組合式 API？》 中的搜尋和排序的例子，想使用 Mixins ，需要先創捷它們各自的 Mixin 物件，然後在元件中引入 ：

const productSearchMixin = {
    data() {
        return {
            // 搜尋變數
        };
    },
    methods: {
        // 搜尋方法
    },
};
const resultSortMixin = {
    data() {
        return {
            // 排序變數
        };
    },
    methods: {
        // 排序方法
    },
};
export default {
    mixins: [productSearchMixin, resultSortMixin],
};
 

這樣程式碼就是按照功能來組織的，但是 Mixins 也有缺點：

• 需要注意命名衝突，具體可以看 Vue 官網選項合併這部分：混入 - Vue.js
• 不清楚這些 mixins 如何互相作用的，如果 mixins 巢狀，會很難理解
• 不可定製，並沒有那麼容易進行復用，按上面的例子，專案中如果需要篩選產品、使用者以及評論之類的場景，就要編寫不一樣的 mixin 物件

Mixin Factories

Mixin 工廠函式可以根據傳入的配置返回定製的 mixin 物件，舉個栗子：

// mixins/factories/search.js
export default function searchMixinFactory({ ... }) {
    // 搜尋功能
}

// mixins/factories/sorting.js
export default function sortingMixinFactory({ ... }) {
    // 整理功能
}

// search.vue
import searchMixinFactory from '@mixins/factories/search';
import sortingMixinFactory from '@mixins/factories/sorting';

export default {
    mixins: [
        productSearchMixin({
            namespace: 'productSeatch',
            // ...搜尋配置引數
        }),
        resultSortMixin({
            namespace: 'resultSorting',
            // ...排序配置引數
        })
    ],
};
 

這樣一來，我們可以通過傳遞不同配置來獲得我們需要特定場景下的 mixin 物件，而搜尋和排序中通用的邏輯得以複用；功能互相作用也有了更清晰的關係。但是使用這種方法需要注意的：

• 嚴格的名稱空間限制
• 還是需要看看 mixins 的內部邏輯，以求知道它們具體做了什麼事
• mixin 工廠函式 不能動態生成

Scoped Slots

Vue2 中第三種邏輯複用的方法是使用作用域插槽，即 Scoped Slots，首先建立三個檔案：

// components/generic-search.vue
<script>
export default {
    props: ['getResults'],
    // 搜尋功能
}
</script>

<template>
    <div>
        <slot v-bind="{ query, results, run }" />
    </div>
</template>
// components/generic-sorting.vue
<script>
export default {
    props: ['input', 'options'],
    // 
}
</script>

<template>
    <div>
        <slot v-bind="{ options, input, output }" />
    </div>
</template>
// search.vue
...
<template>
    <GenericSearch :get-results="getProducts" v-slot="productSearch">
        <GenericSorting
            :input="productSearch.results"
            :options="resultSortingOptions"
            v-slot="resultSorting"
        >
        ...
</template>
 

我們在 search.vue 中使用這些元件傳送特定產品搜尋的配置，這幾乎解決了所有 mixins 的缺點，但是也有其特有的缺陷：

• 增加了縮排，降低程式碼可讀性
• 需要更多的配置
• 暴露的屬性只在模板中可用，降低靈活性
• 需要存在多個元件例項，效能更低