vue mixin的理解与使用

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

关于Vue.mixin在vue官方文档中是这么解释的：

　　混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大！

关于混入，即重复代码复用，减少代码的重复使用。

mixin中可以看作类似Vue实例，data/methods/生命周期函数等都可以在mixin中复用。

Vue.mixin为我们提供了两种混入方式：局部混入和全局混入。

局部混入 使用示例

1. 导出mixin

   //myMixin.js
   
   export let myMixin = {
     data(){
   		return{
   		  message:'hello mixin'
       }
     },
     methods:{
   		testFun(){
   			console.log(this.message)
   		}
     }
   };
   复制代码

2. 在需求页导入

   
   `import {myMixin} from "./mixin";`
   
     new Vue({
   	  //mixins和data同级，注意这里有复数s
   	  mixins:[myMixin],
   	  create:{
   		  this.testFun()
   	  }
     })
   复制代码

   全局混入 使用示例

   全局混入我们只需要把mixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'
import mixin from "./mixin/mixin.js"
Vue.config.productionTip = false
Vue.mixin(mixin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
复制代码

全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法；

mixin混入对象和Vuex的区别

Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；