以更好的方式使用 Vue Mixins
作者：前端小智
Mixin是一個有用的工具，但它會使我們的項目特別是在大項目中變得更加復雜、不靈活和不透明。使用這種方法是一種很好的實踐，可以更加明確mixin含義并避免一些由于不明確導致的bug。
Mixin 組件在項目中經常被用來重用一些業務邏輯，但它們有一些不確定的細微差別，這在項目開發中越來越明顯。我偶爾也會遇到這種情況，它們會給代碼庫的重構或新功能的開發帶來困難。
在介紹我的方法之前，我想先介紹一下使用mixins的優點和缺點。
優點
- 擴展了代碼重用的DRY原則。我們可以在不同的組件中重復使用相同的業務邏輯。
- 我們可以把 mixin 作為一個全局性的 mixin，與所有的組件共享上下文。
缺點
- 使用mixins的組件的邏輯不透明。
- 可重寫的上下文，我們必須注意不要因為相同的名稱覆蓋一些Mixin的方法，getter或數據;
缺點并不是避免使用 mixins 的一個關鍵原因，但我們應該了解它們。建議使用基于這些技巧的方式來減少缺點所帶來的影響。
在 method、getter、value和 props 名字開頭使用前綴。它展示了 mixin 相關的功能。使用這個技巧可以讓我們輕松地分離組件 props 和 mixin props。例如：$<mixinName>_<(prop|method|value)>。
export default {
props: {
$impressionsMixin_page: {
type: Number,
required: true
},
$impressionsMixin_listingId: {
type: Number,
required: true
},
$impressionsMixin_itemId: {
type: Number,
required: true
}
},
data() {
return {
$impressionsMixin_observer: null,
$impressionsMixin_timeout: null,
$impressionsMixin_eventObject: null
};
},
methods: {
$impressionsMixin_getObserverOptions() {
// ...
},
$impressionsMixin_setImpressionObserver() {
// ...
},
$impressionsMixin_resetImpressionObserver() {
// ...
},
$impressionsMixin_logImpression() {
// ...
}
}
};
在父組件中這樣使用：
<template>
<div id="app">
<ListingItem
v-for="item in items"
:key="item.id"
:item="item"
textAlign="left"
:$impressionsMixin_page="page"
:$impressionsMixin_itemId="item.id"
:$impressionsMixin_listingId="listingId"
/>
</div>
</template>
我不喜歡在全局mixin中使用前綴。通常，這些方法和值的名稱是明確的，并且它們的功能不會在項目的其他部分重復，所以不需要為它們添加前綴。
export default {
config() {
// ...
},
user() {
// ...
},
isMobile() {
// ...
},
isTablet() {
// ...
},
isDesktop() {
// ...
}
};
該方式的優點：
- Mixins的方法或屬性可以方便地被IDE自動完成使用。
- 使用前綴可以避免組件的方法意外覆蓋mixin方法和屬性。
- 大項目中的開發者對組件代碼的透明和方便的閱讀。
總結
Mixin是一個有用的工具，但它會使我們的項目特別是在大項目中變得更加復雜、不靈活和不透明。使用這種方法是一種很好的實踐，可以更加明確mixin含義并避免一些由于不明確導致的bug。
作者：knaagar 譯者：前端小智
來源：medium 原文：https://medium.com/@artem.holinka/use-vue-js-mixins-in-a-better-way-11e4ff774763。
責任編輯：姜華
來源：
今日頭條
