vue混入mixin流程與優(yōu)缺點(diǎn)詳解
1、什么是mixin
這不是Vue的專屬的，可以說是一種思想，在很多開發(fā)框架中都實(shí)現(xiàn)了Mixin。
官方解釋：
mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中可復(fù)用的功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
自己的理解：
將組件的公共邏輯或者配置提取出來，哪個組件需要用到時，直接將提取的這部分混入到組件內(nèi)部即可。這樣可以減少代碼冗余度，也可以讓后期維護(hù)起來更加容易。
2、mixin與Vuex的區(qū)別
vuex： 公共狀態(tài)管理，如果在一個組件中更改Vuex中的某個數(shù)據(jù)，name其他所有引入了Vuex中該數(shù)據(jù)的組件也會跟著變化；
Mixin： 中的數(shù)據(jù)和方法都是獨(dú)立的，組件之間使用后是相互不影響的。
3、mixin的使用
可以理解為一個對象。只不過這個對象里面可以包含Vue組件中的一些常見配置。如data，methods，created。
3.1、局部混入
<script>
//1、引入
import MyMixin from "../../mixin/index"
export default {
//使用
mixins: [MyMixin],
}
</script>
3.2、全局混入
在main.js中配置全局混入，請謹(jǐn)慎使用全局混入，因?yàn)樗鼤绊懨總€單獨(dú)創(chuàng)建的Vue實(shí)例。推薦將其作為插件發(fā)布，以避免重復(fù)應(yīng)用混入。
import Mixin from "./mixin"; Vue.mixin(Mixin)
4、mixin選項(xiàng)合并
mixin中定義的屬性或方法名稱與組件中定義的名稱沖突了，該怎么辦？
當(dāng)發(fā)生了沖突，默認(rèn)使用或執(zhí)行組件內(nèi)部的數(shù)據(jù)或方法。
4.1、生命周期函數(shù)
確切來說不算沖突，因?yàn)樯芷诤瘮?shù)的名稱都是固定的。默認(rèn)的合并策略如下：
先執(zhí)行mixin中生命周期函數(shù)中的代碼，然后執(zhí)行組件內(nèi)部的代碼。
4.2、data中的數(shù)據(jù)沖突
當(dāng)mixin中的data數(shù)據(jù)和組件中的data的數(shù)據(jù)沖突時，組件中的data數(shù)據(jù)會覆蓋mixin中數(shù)據(jù)。
4.3、方法沖突
命名方法的名字一樣就會沖突。
可以自定義合并規(guī)則解決沖突，但是感覺沒必要，這使項(xiàng)目更加復(fù)雜了
5、優(yōu)缺點(diǎn)
5.1、優(yōu)點(diǎn)
- 提高代碼復(fù)用性
- 無需傳遞狀態(tài)
- 維護(hù)方便，只需要修改一個地方
5.2、缺點(diǎn)
- 命名沖突
- 濫用的話后期很難維護(hù)
- 不好追溯源，排查問題稍顯麻煩
- 不能輕易的重復(fù)代碼
6、利用mixin開發(fā)一個UI庫
簡單案例
創(chuàng)建Button.vue組件
<template>
<div class="Button">
<button :class="['my-btn', btnStyle]">
<slot></slot>
</button>
</div>
</template>
<script>
export default {
name: "Button",
props: {
btnStyle: {
type: String,
default: 'btn-primary'
},
},
}
</script>
<style scoped>
.my-btn {
height: 34px;
padding: 0 15px;
border: none;
background-color: #874b4b;
color: #fff;
}
.my-btn.btn-primary {
background-color: blue;
/*color: #fff;*/
}
.my-btn.btn-danger {
background-color: red;
/*color: #fff;*/
}
</style>在index.js中引入并暴露：
import MyBtn from "./MyUI/Button";
export default {
components:{
MyBtn
}
}
在組件內(nèi)混入使用的方法
<template>
<div class="MixinStudy">
<!-- 通過Mixin寫的一個UI組件button-->
<MyBtn btnStyle="btn-danger">點(diǎn)擊</MyBtn>
</div>
</template>
<script>
import MyMixin from "../../mixin/index"
export default {
name: "MixinStudy",
mixins: [MyMixin],
}
</script>
全局混入的使用方法
main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Mixin from "./mixin";
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;
Vue.mixin(Mixin)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
//組件中
<template>
<div class="MixinStudy">
<!-- 通過Mixin寫的一個UI組件button-->
<MyBtn btnStyle="btn-danger">點(diǎn)擊</MyBtn>
</div>
</template>
<script>
export default {
name: "MixinStudy",
}
</script>到此這篇關(guān)于vue混入mixin流程與優(yōu)缺點(diǎn)詳解的文章就介紹到這了,更多相關(guān)vue混入mixin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-editor-bridge報(bào)錯的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件，可以控制只顯示省級或只顯示省市兩級，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下2018-11-11
vue3限制table表格選項(xiàng)個數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了代號為Naruto的Vue?2.7正式發(fā)布功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 組件封裝 并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05