Vue Mixin 用法(实质是抽离出一个公共的vue实例)

Vue.mixin是Vue的混入功能，它会影响到每个Vue实例，且会影响所有组件的生命周期。使用Vue.mixin可以为Vue实例和组件添加全局的属性、方法、钩子函数等。  

一、介绍

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。(实质是抽离出一个公共的vue实例，在引入组件中使用这个实例)

• index.vue与mixin.js中的 数据，计算属性，方法等将进行合并；
• 如果两者有相同的数据，index.vue文件将覆盖前者；
• methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的
• 生命周期钩子入mounted之类的内容两者将都会执行，同名的生命周期钩子，mixin.js中的内容将先执行；
• index.vue和mixin.js中的数据可以任意方式组合使用，但是为了提高封装性，请尽量避免在mixin.js中使用index.vue的数据或方法，可以在mixin.js中设置默认值，在index.vue中重写mixin.js中的内容；
• index.vue可以引入多个mixin。

二、使用

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹，然后新建mixin.js文件，该文件存放我们的mixin代码。

// src/mixin/index.js

export default {
  components: {
  },
  data () {
    return {
      data1: 'mixin1',
      data2: 'mixin2'
    }
  },
  computed: {
    computed1 () {
      return this.data1 + this.data2
    },
    computed2 () {
      return this.data1 + this.data3
    }
  },
  mounted () {
    console.log('mixin中的mounted')
  },
  methods: {
    handleMethod1 () {
      console.log(
        `mixin中的方法1，
        data1：${this.data1}，
        computed1：${this.computed1}`
      )
    },
    handleMethod2 () {
      console.log(
        `mixin中的方法2，
        data2：${this.data2}，
        computed2：${this.computed2}`
      )
    }
  }
}

2.1 局部混入（推荐） 

App.vue

// 引入
import Mixin from './mixin/mixin.js'

export default {
  // 使用，放入一个数组
  mixins: [Mixin],
}

<template>
  <div></div>
</template>
<script>
// 局部引入mixin
import Mixin from './mixin/mixin.js'
export default {
  // 使用，放入一个数组
  mixins: [Mixin],
  data () {
    return {
      data1: 'index1',
      data3: 'index3'
    }
  },
  computed: {
    computed1 () {
      return this.data1 + this.data2
    },
    computed3 () {
      return this.data2 + this.data3
    }
  },
  mounted () {
    console.log('组件中的mounted')
    this.handleMethod1()
    this.handleMethod2()
    this.handleMethod3()
  },
  methods: {
    handleMethod1 () {
      console.log(
        `组件中的方法1，
        data1：${this.data1}，
        computed1：${this.computed1}`
      )
    },
    handleMethod3 () {
      console.log(
        `组件中的方法3，
        data3：${this.data3}，
        computed3：${this.computed3}`
      )
    }
  }
}
</script>

</script>

执行结果：

mixin中的mounted
组件中的mounted
组件中的方法1，data1：index1，computed1：index1mixin2
mixin中的方法2，data2：mixin2，computed2：index1index3
组件中的方法3，data3：index3，computed3：mixin2index3

通过上面的代码和效果我们可以得出以下几点：

• mixin中的生命周期函数会和组件的生命周期函数一起合并执行，生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。
• mixin中的data数据在组件中也可以使用。
• mixin中的方法在组件内部可以直接调用。
• data数据冲突：组件中的data数据会覆盖mixin中数据
• 方法冲突：组件中的methods会覆盖mixin中

问题提出：

这里我们就提出了一个问题：一个组件中改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？

答案是不会的！

2.2 全局混入

修改main.js，代码如下：

import Vue from "vue";
import App from "./App.vue";

// 全局引入mixin
import Mixin from './mixin/mixin.js'
Vue.mixin(Mixin);

Vue.config.productionTip = false;

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

 然后把App.vue中引入mixin的代码注释掉

使用场景：

1. 全局设置一些默认属性或方法，如全局的axios请求拦截器、响应拦截器等。
2. 全局添加一些通用的方法或属性，如日期格式化、金额格式化等。
3. 全局为所有组件添加一些公共的钩子函数，如beforeCreate钩子函数进行一些初始化操作。

// 定义一个全局的混入对象
var myMixin = {
  created: function () {
    this.logMessage('Hello from mixin!')
  },
  methods: {
    logMessage: function (message) {
      console.log(message)
    }
  }
}
 
// 将全局混入对象应用到每个Vue实例中
Vue.mixin(myMixin)
 
// 创建一个Vue实例
new Vue({
  el: '#app',
  created: function () {
    this.logMessage('Hello from Vue instance!')
  }
})

2.3 优点

• 提高代码复用性
• 无需传递状态
• 维护方便，只需要修改一个地方即可

2.4 缺点

• 命名冲突
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦
• 不能轻易的重复代码

2.5应用场景案例

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

举个例子

定义一个modal弹窗组件，内部通过isShowing来控制显示

const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

定义一个tooltip提示框，内部通过isShowing来控制显示

const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

通过观察上面两个组件，发现两者的逻辑是相同，代码控制显示也是相同的，这时候mixin就派上用场了

首先抽出共同代码，编写一个mixin

export default {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

两个组件在使用上，只需要引入mixin

const Modal = {
  template: '#modal',
  mixins: [toggle]
};
 
const Tooltip = {
  template: '#tooltip',
  mixins: [toggle]
}

与vuex的区别：

vuex：用来做共享状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别：

组件：在父组件中引入子组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。