前言

我們在實(shí)際項(xiàng)目開發(fā)中,有很多基本相似功能模塊,只是操作顯示數(shù)據(jù)不同,很多邏輯和配置都是相同的

在Vue項(xiàng)目里,每個(gè)單文件組件都是一個(gè)模塊組件,每個(gè)組件都有自己內(nèi)部的數(shù)據(jù)和方法邏輯

如果每個(gè)單文件組件想要實(shí)現(xiàn)同樣的功能

那么在每個(gè)單文件組件都要在邏輯業(yè)務(wù)代碼里重復(fù)寫一遍,這樣在很多單文件組件內(nèi),到處都是從某一處復(fù)制粘貼過來的代碼

在Vue當(dāng)中,可以用封裝組件來達(dá)到復(fù)用代碼的目的,除了可以復(fù)用模板,那么邏輯,一些配置選項(xiàng),是不是也可以公用?

當(dāng)然是可以的,當(dāng)只需要二次修改時(shí),同樣的邏輯的代碼，只需要修改一處就可以了的

今天就來學(xué)習(xí)下Vue當(dāng)中的這個(gè)mixin的,多個(gè)組件,當(dāng)遇到相同的邏輯,是如何共用邏輯配置的

需求

假設(shè):現(xiàn)在有兩個(gè)不同的按鈕組件ButtonA,ButtonB,點(diǎn)擊它彈出組件自身不同的屬性

用Vue-cli腳手架創(chuàng)建一個(gè)項(xiàng)目,在components文件夾下分別創(chuàng)建ButtonA.vue,ButtonB.vue兩個(gè)組件

以下是ButtonA組件內(nèi)容,在按鈕上綁定了handleButton方法,并在methods選項(xiàng)配置中定義

<template>
    <div class="wrap">
        <button @click="handleButton">按鈕組件A</button>
    </div>
</template>
<script>
    export default {
        name: "ButtonA",
        data() {
            return {
                name: "itclan.cn"
            }
        },
        methods: {
            handleButton() {
                alert(this.name);
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrap {
    margin-right: 20px;
}
</style>

以下是ButtonB組件內(nèi)容,在按鈕上綁定了handleButton方法,并在methods選項(xiàng)配置中定義

<template>
    <div>
        <button @click="handleButton">按鈕組件B</button>
    </div>
</template>

<script>
    export default {
        name: "ButtonB",
        data() {
            return {
                name: "video.itclan.cn"
            }
        },
        methods: {
            handleButton() {
                alert(this.name);
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

然后再App.vue當(dāng)中引入兩個(gè)ButtonA,ButtonB組件

<template>
  <div id="app">
       <ButtonA></ButtonA>
       <ButtonB></ButtonB>
  </div>
</template>

<script>

import ButtonA from "./components/ButtonA"
import ButtonB from "./components/ButtonB"
export default {
  name: 'App',
  components: {
    ButtonA,
    ButtonB
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
</style>

經(jīng)過上面的幾行代碼,可以實(shí)現(xiàn)我們想要的目的,但是你會發(fā)現(xiàn),他們的功能邏輯都是一樣的,定義的方法名也都是一樣的

如果一個(gè)項(xiàng)目里,有很多個(gè)這樣的組件,只要想改,那么所有的單文件組件都得手動的修改一次,毫無疑問,重復(fù)性的代碼也比較多,比較分散

對于不同組件間同樣的配置,能不能提取出來共用一份呢,在Vue當(dāng)中,提供了mixin

什么是mixin

把多個(gè)組件共有的配置提取成一個(gè)混入對象,然后通過局部混入或者全局混入,以達(dá)到共用配置的目的,這就是mixin

官方文檔: 混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)

翻譯一下: 將組件的公共邏輯或者配置(包括data,方法,生命周期,甚至props等)提取出來，哪個(gè)組件需要用到時(shí)，直接將提取的這部分混入到組件內(nèi)部即可。這樣既可以減少代碼冗余度，也可以讓后期維護(hù)起來更加容易，改一處即可,不用到處去每個(gè)組件內(nèi)修改配置

注意：提取的是邏輯或配置，而不是HTML代碼和CSS代碼。也就是說，mixin就是組件中的組件，Vue組件化讓我們的代碼復(fù)用性更高

那么組件與組件之間還有重復(fù)部分，比如邏輯業(yè)務(wù)的復(fù)用,我們還可以使用Mixin在抽離一遍

以下是經(jīng)過mixin改寫過的

在src文件夾下創(chuàng)建一個(gè)mixin文件夾(這個(gè)文件夾下全部放入一些混入),創(chuàng)建一個(gè)popButton.js文件,創(chuàng)建一個(gè)對象,然后暴露出去,如下所示

export const popButton  = {
    // 這里面組件選項(xiàng)的配置都是可以的,生命周期等,data屬性,計(jì)算屬性,監(jiān)聽屬性等
    methods: {
        handleButton() {
            alert(this.name);
        }
    }
}

然后再組件使用處引入即可,如下ButtonA組件,通過import引入,同時(shí)在組件配置選項(xiàng)中mixins:[引入的混入名],要是多個(gè)的話,用逗號分隔

<template>
    <div class="wrap">
        <button @click="handleButton">按鈕組件A</button>
    </div>
</template>

<script>
import {popButton} from "../mixin/popButton.js"
    export default {
        name: "ButtonA",
        mixins: [popButton],
        data() {
            return {
                name: "itclan.cn"
            }
        },
    }
</script>

<style lang="scss" scoped>
.wrap {
    margin-right: 20px;
}
</style>

這種在組件內(nèi)部,通過minxins:[混入名稱],也被視為局部混入

局部混入也就是只在當(dāng)前組件內(nèi)起作用,與按需加載有些相似,也就是需要用到mixin中的代碼時(shí)，我們再在組件內(nèi)引入它

而全局混入的話，則代表我在項(xiàng)目的任何組件中都可以使用mixin,從根組件下至到它的任何一個(gè)組件都會用到混入

全局混入

局部混入是,在需要的組件引入混入,通過import導(dǎo)入混入,在通過在組件的配置選項(xiàng)中通過minxins: [混入名稱]

而全局混入,則是在項(xiàng)目代碼中的main.js中去引入混入,在用Vue.mixin(混入名稱)進(jìn)行注冊

這樣任何一個(gè)組件,都可以使用混入了的,如下代碼所示

import Vue from 'vue'
import App from './App.vue'

import {popButton} from "./mixin/popButton.js"

Vue.mixin(popButton);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

::: tip 注意事項(xiàng) 在使用全局混入時(shí),應(yīng)當(dāng)格外小心,一旦使用全局混入,它將影響每一個(gè)之后創(chuàng)建的vue實(shí)例,也就是所有的vm,vc都會有混入

它與局部混入沒有啥區(qū)別,雖然一次性注入混入很方便,但是也會帶來一些問題,所有的組件實(shí)例,Vue實(shí)例都會有混入

在官方的特殊提示里,提到了,謹(jǐn)慎使用全局混入,因?yàn)樗鼤绊懨總€(gè)單獨(dú)創(chuàng)建的vue實(shí)例(包括第三方組件)

大多數(shù)情況下,只應(yīng)當(dāng)應(yīng)用于自定義選項(xiàng),就像上面示例一樣,推薦將其作為插件發(fā)布,以避免重復(fù)應(yīng)用混入 :::

幾個(gè)重要的疑問

• mixin中的生命周期函數(shù)會和組件的生命周期一起合并執(zhí)行
• mixin中的data數(shù)據(jù)在組件中可以使用
• mixin中的方法在組件內(nèi)部可以直接調(diào)用
• 生命周期函數(shù)合并后執(zhí)行順序:先執(zhí)行mixin中的,然后執(zhí)行組件的
• mounted不會合并,都會加載一遍
• 不同組件中的mixin是相互獨(dú)立的,改變一個(gè)組件中mixin中的數(shù)據(jù),另一個(gè)引用了mixin的組件不會受影響

如下代碼

export const popButton  = {
    data() {
        return {
            name: "川川",
            age: 18
        }
    },
    created() {
        console.log("混入生命周期開始執(zhí)行");
    },
    mounted() {
        console.log("我是混入");
    },
    methods: {
        handleButton() {
            alert(this.name);
        },
        handleMounted() {
            console.log("加載方法");
        }
    }
}

選項(xiàng)合并

當(dāng)組件和混入對象含有同名選項(xiàng)時(shí),這些選項(xiàng)將以合適的方式進(jìn)行合并

也就是說,當(dāng)mixin中定義的數(shù)據(jù),方法名與組件里的屬性名,方法名同名時(shí),會怎么樣呢

會存在數(shù)據(jù),和方法名的覆蓋問題?誰覆蓋誰?執(zhí)行先后順序是?

生命周期函數(shù)

mixin里面可以有自己的生命周期函數(shù)，同組件一樣,生命周期函數(shù)是自執(zhí)行函數(shù),在某個(gè)階段會自動執(zhí)行

它都是固定的,默認(rèn)合并策略如下所示

• 先執(zhí)行mixin中生命周期函數(shù)中的代碼,然后再執(zhí)行組件內(nèi)部的代碼

export const popButton  = {
    data() {
        return {
            name: "川川",
            age: 18
        }
    },
    beforeCreate() {
        console.log("創(chuàng)建之前");
    },
    created() {
        console.log("混入生命周期開始執(zhí)行");
    },
    mounted() {
        console.log("我是混入");
    },

    beforeUpdate() {
        console.log("更新之前");
    },
    updated() {
        console.log("更新之時(shí)");
    },
    beforeDestroy() {
        console.log("銷毀之前");
    },
    destroyed() {
        console.log("銷毀時(shí)");
    },
    methods: {
        handleButton() {
            alert(this.name);
        },
        handleMounted() {
            console.log("加載方法");
        }
    }
}

若是方法重名,則后者組件內(nèi)的方法會覆蓋mixin中的方法

data數(shù)據(jù)沖突

當(dāng)mixin中的data數(shù)據(jù)與組件中的data數(shù)據(jù)沖突時(shí),組件中的data數(shù)據(jù)會覆蓋mixin中的數(shù)據(jù)

若是沒有相同的話,會進(jìn)行數(shù)據(jù)的合并

export const popButton  = {
    data() {
        return {
            name: "川川",
            age: 18
        }
    },
}

方法名沖突

在同一個(gè)項(xiàng)目里,起相同的名稱,是很容易遇到的,如果mixin中的方法名與引入mixin中組件的方法名一致時(shí),那么以當(dāng)前組件為準(zhǔn)

mixin的優(yōu)缺點(diǎn)

既然mixin這么好用,那為什么不直接大量推薦使用?mixin可以復(fù)用組件的邏輯,這樣可以節(jié)省很多代碼,但是同樣,也會帶來一些問題

1.變量名來源不明確

在某些單文件組件里,引入mixin,因?yàn)榻M件內(nèi)可以調(diào)用mixin的方法和使用mixin中定義的數(shù)據(jù),找上下文的時(shí)候,變得不是那么直觀，要么通過閱讀代碼逐級向上進(jìn)行查找,要么就是全局進(jìn)行搜索查找

使用mixin時(shí),不利于閱讀,代碼變得難以維護(hù)

因?yàn)榻M件里可以引入多個(gè)mixin,并直接隱式的調(diào)用mixin里面的變量和方法,這會讓寫代碼的人看著有些混亂,區(qū)分不出這些變量和方法,分別是哪個(gè)mixin的

所以這里建議是：但凡mixin的方法,統(tǒng)一放到mixin文件夾下進(jìn)行管理的

2. 多個(gè)mixins的生命周期會合并融合到一起運(yùn)行,但是同名屬性,同名方法無法融合,會導(dǎo)致沖突或覆蓋

當(dāng)遇到組件中定義的屬性,方法與minxin當(dāng)中的出現(xiàn)相同時(shí),后者組件的屬性會覆蓋mixin中的屬性

3. mixins和組件可能出現(xiàn)多對多的關(guān)系,復(fù)雜度會變高

一個(gè)組件可以引用多個(gè)mixins一個(gè)mixins也可以被多個(gè)組件引用,因?yàn)槭枪灿眠壿?所以在關(guān)系上,不是很明確

不好追溯代碼,排查問題,可以利用工具vscode全局搜索,如果是很多個(gè)地方用到了的mixin那么就得挨個(gè)的檢查

如果濫用mixin的話,會讓代碼變得難以維護(hù)

如果是用了全局混入,在審查代碼時(shí),在任何一組件當(dāng)中會莫名的多出一些屬性和方法,會令新的同學(xué)很困惑,如果對mixin很熟悉的話,那沒什么,如果不熟悉

那么就非?？鄲?這個(gè)變量名和方法,我在組件當(dāng)中明明沒有定義,但是為啥能使用呢,帶來一些困惑

注意

如果一個(gè)功能,邏輯,一開始就很確定,它以后是不會動的,那么就可以使用mixin

mixin優(yōu)點(diǎn)

• 提高組件代碼復(fù)用性
• 無需傳遞狀態(tài)
• 維護(hù)方便,只需要修改一處地方就可以,全局混入,應(yīng)當(dāng)謹(jǐn)慎使用

總結(jié)

mixin是在vue當(dāng)中復(fù)用邏輯,精簡代碼的一種思想,相當(dāng)于就是提取組件當(dāng)中的公共配置屬性,方法，可以使用mixins:[混入名稱]局部混入,也可以在main.js中Vue.mixin(混入名稱),全局混入

給封裝復(fù)用代碼帶來了很多方便,但是也不要濫用它,有些場景非常適合,但是有些場景使用過多了,也會帶來一些不可預(yù)知的問題

一般封裝公共組件就比較適合使用mixin,還有做數(shù)據(jù)可視化時(shí),當(dāng)組件層級較多,想要從同一個(gè)數(shù)據(jù)源抽出公共的數(shù)據(jù)時(shí),也可以使用mixin

在閱讀一些優(yōu)秀的項(xiàng)目時(shí),也會看到很多項(xiàng)目里有使用mixin的

到此這篇關(guān)于vuejs中使用mixin局部混入/全局混入的文章就介紹到這了,更多相關(guān)vuejs使用mixin局部/全局混入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論