<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)我們想要的目的,但是你會(huì)發(fā)現(xiàn),他們的功能邏輯都是一樣的,定義的方法名也都是一樣的

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

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

什么是mixin

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

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

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

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

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

<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í)，我們?cè)僭诮M件內(nèi)引入它

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

全局混入

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

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

這樣任何一個(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都會(huì)有混入

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

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

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

幾個(gè)重要的疑問

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

如下代碼

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)組件和混入對(duì)象含有同名選項(xiàng)時(shí),這些選項(xiàng)將以合適的方式進(jìn)行合并

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

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

生命周期函數(shù)

mixin里面可以有自己的生命周期函數(shù)，同組件一樣,生命周期函數(shù)是自執(zhí)行函數(shù),在某個(gè)階段會(huì)自動(dòng)執(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)的方法會(huì)覆蓋mixin中的方法

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

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

若是沒有相同的話,會(huì)進(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é)省很多代碼,但是同樣,也會(huì)帶來(lái)一些問題

1.變量名來(lái)源不明確

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

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

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

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

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

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

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

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

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

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

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

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

注意

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

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

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

總結(jié)

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

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

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

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

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

vuejs中使用mixin局部混入/全局混入的方法詳解

目錄

前言

需求