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 的缺點，但是也有其特有的缺陷：
- 增加了縮進，降低代碼可讀性
- 需要更多的配置
- 暴露的屬性只在模板中可用，降低靈活性
- 需要存在多個組件實體，性能更低
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121183.html
標籤：JavaScript