什麼是Mixin？這篇文章帶大家了解一下Vue中的Mixin混入，介紹Mixin和Vuex的差別，Mixin的使用方法，希望對大家有幫助！
Vue框架現在基本上已經佔據了前端的半壁江山，Vue的資料驅動和元件化的想法深入人心。 Vue全家桶可能很多小夥伴都比較熟悉，在工作上也用得比較得心應手。但是今天講的Vue中這個Mixin的用法我相信還有很多小伙伴不知道或者沒有用過，或者有些小伙伴接手別人的Vue項目時看到裡面有個Mixin文件夾，也會用，但是一直都是雲裡霧裡的狀態，今天我們就好好聊聊Mixin，爭取以後不在犯迷糊。 【相關推薦：vuejs影片教學】
想要使用一個事物或工具，我們首要先了解它是什麼，這樣我們才好對症下藥。
其實Mixin不是Vue專屬的，可以說它是一種思想，也可以說它就是混入的意思，在很多開發框架中都實現了Mixin(混入)，我們這裡主要講解的是Vue中的Mixin。
老規矩，先看官方文件。
官方解釋：
混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可重複使用功能。一個混入物件可以包含任意組件選項。當組件使用混入物件時，所有混入物件的選項將被「混合」進入該元件本身的選項。
官方的解釋通常都是晦澀難懂的，因為要專業和準確嘛！
我們可以用我們自己容易理解的話來說說Vue中的Mixin是什麼。
民間解釋：
將元件的公共邏輯或設定提取出來，哪個元件需要用到時，直接將提取的這部分混入到元件內部即可。這樣既可以減少程式碼冗餘度，也可以讓後期維護起來更加容易。
這裡要注意的是：提取的是邏輯或配置，而不是HTML程式碼和CSS程式碼。其實大家也可以換個想法，mixin就是元件中的元件，Vue元件化讓我們的程式碼重複使用性更高，那麼元件與元件之間還有重複部分，我們使用Mixin在抽離一次。
上面一點說Mixin就是一個抽離公共部分的作用。在Vue中，Vuex狀態管理似乎也是做的這一件事，它也是將元件之間可能共享的資料抽離出來。兩者看似一樣，實則還是有細微的區別，區別如下：
我們了解了Mixin的概念，那麼要如何使用它呢？這才是我們的重點。
接下來我們的mixin就放在Vue2.x的鷹架專案中示範。
利用Vue-cli初始化一個最簡單的項目：
定義mixin也非常簡單，它就是一個物件而已，只不過這個物件裡面可以包含Vue元件中的一些常見配置，如data、methods、created等等。
在我們的專案src目錄下新建mixin資料夾，然後新建index.js文件，該文件存放我們的mixin程式碼。
程式碼如下：
// src/mixin/index.js
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {},
};
#可以看到我們的mixin非常的簡單，主要包含了一個Vue元件的常見的邏輯結構。
接下來讓我們在mixin中簡單的寫點東西，程式碼如下：
export const mixins = {
data() {
return {
msg: "我是小猪课堂",
};
},
computed: {},
created() {
console.log("我是mixin中的created生命周期函数");
},
mounted() {
console.log("我是mixin中的mounted生命周期函数");
},
methods: {
clickMe() {
console.log("我是mixin中的点击事件");
},
},
};我們的公共mixin定義好後，最重要就是如何使用它。根據不同的業務場景，我們可以分為兩種：局部混入和全域混入。顧名思義，局部混入和元件的按需載入有點類似，就是需要用到mixin中的程式碼時，我們再在元件章引入它。全域混入的話，則代表我在專案的任何元件中都可以使用mixin。
元件中引入mixin也非常簡單，我們稍微改造下App.vue元件。
程式碼如下：
// src/App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<button @click="clickMe">点击我</button>
</div>
</template>
<script>
import { mixins } from "./mixin/index";
export default {
name: "App",
mixins: [mixins],
components: {},
created(){
console.log("组件调用minxi数据",this.msg);
},
mounted(){
console.log("我是组件的mounted生命周期函数")
}
};
</script>效果如下：
上段代码中引入mixin的方法也非常简单，直接使用vue提供给我们的mixins属性：mixins:[mixins]。
通过上面的代码和效果我们可以得出以下几点：
问题提出：
这里我们就提出了一个问题：一个组件中改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？
答案是不会的！
我们可以尝试一下：
在src下的components文件夹下新建demo组件，代码如下：
// src/components/demo.vue
<template>
<div>mixin中的数据：{{ msg }}</div>
</template>
<script>
import { mixins } from "../mixin/index";
export default {
mixins: [mixins],
};
</script>然后在App.vue组件中引入demo组件，代码如下：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<button @click="clickMe">点击我</button>
<button @click="changeMsg">更改mixin数据</button>
<demo></demo>
</div>
</template>
<script>
import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
name: "App",
mixins: [mixins],
components: { demo },
created() {
console.log("组件调用minxi数据", this.msg);
},
mounted() {
console.log("我是组件的mounted生命周期函数");
},
methods: {
changeMsg() {
this.msg = "我是变异的小猪课堂";
console.log("更改后的msg:", this.msg);
},
},
};
</script>代码解释：
效果如下：
可以看到我们在App.vue组件中更改了msg后，demo组件显示没有任何变化，所以这里我们得出结论：不同组件中的mixin是相互独立的！
上一点我们使用mixin是在需要的组件中引入它，我们也可以在全局先把它注册好，这样我们就可以在任何组件中直接使用了。
修改main.js，代码如下：
import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");然后把App.vue中引入mixin的代码注释掉，代码如下：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<button @click="clickMe">点击我</button>
<button @click="changeMsg">更改mixin数据</button>
<demo></demo>
</div>
</template>
<script>
// import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
name: "App",
// mixins: [mixins],
components: { demo },
created() {
console.log("组件调用minxi数据", this.msg);
},
mounted() {
console.log("我是组件的mounted生命周期函数");
},
methods: {
changeMsg() {
this.msg = "我是变异的小猪课堂";
console.log("更改后的msg:", this.msg);
},
},
};
</script>效果如下：
可以发现效果上和局部混入没有任何区别，这就是全局混入的特点。
虽然这样做很方便，但是我们不推荐，来看看官方的一段话：
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
上面的列子中我们仔细看会发现一个问题：mixin中定义的属性或方法的名称与组件中定义的名称没有冲突！
那么我们不禁会想，如果命名有冲突了怎么办？
我们使用git合并代码的时候经常会有冲突，有冲突了不要怕，我们合并就好了。这里的冲突主要分为以下几种情况：
（1）生命周期函数
确切来说，这种不算冲突，因为生命周期函数的名称都是固定的，默认的合并策略如下：
（2）data数据冲突
当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据，借用官方的一段代码：
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})可以看到最终打印的message是组件中message的值，其它没有冲突的数据自然合并了。
（3）方法冲突
这种冲突很容易遇到，毕竟大家命名方法的名字很容易一样，这里同样借用官方的一段代码：
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"上段代码中mixin和组件中都有conficting方法，但是最终在组件中调用时，实际调用的是组件中的conflicting方法。
当然，如果你要自定义合并规则也不是不可以，但是我觉得没有必要，项目中无需做这么复杂。
从上面的例子看来，使用mixin的好处多多，但是凡是都有两面性，这里总结几点优缺点供大家参考：
總結mixin給我們提供了方便的同時也給我們帶來了災難，所以有很多時候不建議濫用它，但是在有些場景下使用它又是非常合適的，這就得根據自己來取捨了。所以在很多時候我們需要考慮使用公共元件還是使用mixin。
###（學習影片分享：###vuejs教學###、###web前端###）###以上是什麼是Mixin？帶你了解Vue中的Mixin混入的詳細內容。更多資訊請關注PHP中文網其他相關文章！
