什麼是Mixin？帶你了解Vue中的Mixin混入

什麼是Mixin？這篇文章帶大家了解一下Vue中的Mixin混入，介紹Mixin和Vuex的差別，Mixin的使用方法，希望對大家有幫助！

Vue框架現在基本上已經佔據了前端的半壁江山，Vue的資料驅動和元件化的想法深入人心。 Vue全家桶可能很多小夥伴都比較熟悉，在工作上也用得比較得心應手。但是今天講的Vue中這個Mixin的用法我相信還有很多小伙伴不知道或者沒有用過，或者有些小伙伴接手別人的Vue項目時看到裡面有個Mixin文件夾，也會用，但是一直都是雲裡霧裡的狀態，今天我們就好好聊聊Mixin，爭取以後不在犯迷糊。 【相關推薦：vuejs影片教學】

#1. 什麼是Mixin？

想要使用一個事物或工具，我們首要先了解它是什麼，這樣我們才好對症下藥。

其實Mixin不是Vue專屬的，可以說它是一種思想，也可以說它就是混入的意思，在很多開發框架中都實現了Mixin(混入)，我們這裡主要講解的是Vue中的Mixin。

老規矩，先看官方文件。

官方解釋：

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可重複使用功能。一個混入物件可以包含任意組件選項。當組件使用混入物件時，所有混入物件的選項將被「混合」進入該元件本身的選項。

官方的解釋通常都是晦澀難懂的，因為要專業和準確嘛！

我們可以用我們自己容易理解的話來說說Vue中的Mixin是什麼。

民間解釋：

將元件的公共邏輯或設定提取出來，哪個元件需要用到時，直接將提取的這部分混入到元件內部即可。這樣既可以減少程式碼冗餘度，也可以讓後期維護起來更加容易。

這裡要注意的是：提取的是邏輯或配置，而不是HTML程式碼和CSS程式碼。其實大家也可以換個想法，mixin就是元件中的元件，Vue元件化讓我們的程式碼重複使用性更高，那麼元件與元件之間還有重複部分，我們使用Mixin在抽離一次。

2. Mixin和Vuex的差別？

上面一點說Mixin就是一個抽離公共部分的作用。在Vue中，Vuex狀態管理似乎也是做的這一件事，它也是將元件之間可能共享的資料抽離出來。兩者看似一樣，實則還是有細微的區別，區別如下：

• Vuex公共狀態管理，如果在一個組件中更改了Vuex中的某個數據，那麼其它所有引用了Vuex中該資料的元件也會跟著變化。
• Mixin中的資料和方法都是獨立的，元件之間使用後是互相不影響的。

3. 如何使用？

我們了解了Mixin的概念，那麼要如何使用它呢？這才是我們的重點。

3.1 準備工作

接下來我們的mixin就放在Vue2.x的鷹架專案中示範。

利用Vue-cli初始化一個最簡單的項目：

#3.1 mixin定義

定義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中的点击事件");
    },
  },
};

3.2 局部混入

我們的公共mixin定義好後，最重要就是如何使用它。根據不同的業務場景，我們可以分為兩種：局部混入和全域混入。顧名思義，局部混入和元件的按需載入有點類似，就是需要用到mixin中的程式碼時，我們再在元件章引入它。全域混入的話，則代表我在專案的任何元件中都可以使用mixin。

元件中引入mixin也非常簡單，我們稍微改造下App.vue元件。

程式碼如下：

// src/App.vue
<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <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中的data数据在组件中也可以使用。
• mixin中的方法在组件内部可以直接调用。
• 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。

问题提出：

这里我们就提出了一个问题：一个组件中改动了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 src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <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>

代码解释：

• 我们在demo组件中引入了mixin，且使用了mixin中的msg数据。
• 在App.vue中同样引入了mixin，且设置了点击事件更改msg
• 点击按钮，更改msg，查看demo组件中显示是否有变化。

效果如下：

可以看到我们在App.vue组件中更改了msg后，demo组件显示没有任何变化，所以这里我们得出结论：不同组件中的mixin是相互独立的！

3.3 全局混入

上一点我们使用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 src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <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 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

3.4 选项合并

上面的列子中我们仔细看会发现一个问题：mixin中定义的属性或方法的名称与组件中定义的名称没有冲突！

那么我们不禁会想，如果命名有冲突了怎么办？

我们使用git合并代码的时候经常会有冲突，有冲突了不要怕，我们合并就好了。这里的冲突主要分为以下几种情况：

（1）生命周期函数

确切来说，这种不算冲突，因为生命周期函数的名称都是固定的，默认的合并策略如下：

• 先执行mixin中生命周期函数中的代码，然后在执行组件内部的代码，上面的例子其实就很好的证明了。

（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方法。

当然，如果你要自定义合并规则也不是不可以，但是我觉得没有必要，项目中无需做这么复杂。

4. mixin的优缺点

从上面的例子看来，使用mixin的好处多多，但是凡是都有两面性，这里总结几点优缺点供大家参考：

4.1 優點

• 提高程式碼復用性
• 無需傳遞狀態
• 維護方便，只需要修改一個地方即可

4.2 缺點

• 命名衝突
• 濫用的話後期很難維護
• 命名衝突

濫用的話後期很難維護

#不好回溯來源，排查問題稍顯麻煩

不能輕易的重複程式碼

總結mixin給我們提供了方便的同時也給我們帶來了災難，所以有很多時候不建議濫用它，但是在有些場景下使用它又是非常合適的，這就得根據自己來取捨了。所以在很多時候我們需要考慮使用公共元件還是使用mixin。

###（學習影片分享：###vuejs教學###、###web前端###）###

以上是什麼是Mixin？帶你了解Vue中的Mixin混入的詳細內容。更多資訊請關注PHP中文網其他相關文章！