理解Vue.mixin混入，利用mixin高效复用组件

理解Vue.mixin混入，利用mixin高效复用组件

先看vue官方文档中的解释：

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

我的理解是：

我们先创建一个vue组件，自定义一些会复用到的方法和变量，将这个组件作为混入对象；mixin提供了将一个组件混入到其他vue实例中的方法，通过这个方法，把我们自定义的方法和变量挂载到vue实例上，方便我们进行复用。

mixin有两种混入方式，先看

局部混入：只在引入了mixin混入对象的组件中才生效

首先，在src目录下创建mixin目录，新建mixin.js文件

export const mixin = {//抛出混入对象
    data(){
        return{
            num:1
        }
    },
}

然后，建立page.vue页面

<template>
  <div>
    <h1>page1:{{num}}</h1>//mixin.js已经混入到page.vue页面中了，这里取的是mixin.js里的变量num
  </div>
</template>

<script>
import {mixin} from '@/mixin/mixin.js'//引入mixin.js文件
export default {
  name: 'page1',
  mixins:[mixin],//属性名为mixins，值为数组类型
  data(){
    return{

    }
  }
}
</script>

页面展示

现在，我们再创建一个vue页面，命名为page2.vue；在这个页面里，我们给num+1

<template>
  <div>
    <h1>page2:{{num}}</h1>
  </div>
</template>

<script>
import {mixin} from '@/mixin/mixin.js'
export default {
  name:'page2',
  mixins:[mixin],
  mounted() {
    this.num += this.num
  }
}
</script>

页面展示

page2里的num+1 = 2没有问题，page1的num还是1；
也就是说mixin里可以定义公用的方法和对象，但是混入对象是不会共享的，每个mixin实例都是单独存在的。

再看页面执行的先后顺序

我们在mixin.js里加上

    created() {
        console.log('mixin的混入对象created');
    }

在page2.vue里加上

  created() {
    console.log('page2的created');
  },

页面效果

mixin混入对象和vue实例中的钩子函数都会执行，且mixin中的钩子函数会先执行；

我们在page2.vue页面给num赋值为10

<template>
  <div>
    <h1>page2:{{num}}</h1>
  </div>
</template>

<script>
import {mixin} from '@/mixin/mixin.js'
export default {
  name:'page2',
  mixins:[mixin],
  data(){
    return{
      num:99
    }
  },
</script>

页面展示

实际上，如果存在同名函数和对象，mixin会进行递归合并为数组，也就是说mixin混入对象在先，vue实例中的同名对象会覆盖mixin混入对象中的值，会执行vue实例中的同名对象。

全局混入：将mixin.js引入main.js，放进Vue.mixin()中就行了

import mixin from "./mixin/mixin.js"
Vue.mixin(mixin)

全局混入后将不用在子组件中声明了，直接用this.xx就可以调用。

放结论：

1. mixin里可以定义公用的方法和对象，但是混入对象是不会共享的，每个mixin实例都是单独存在的；
2. mixin混入对象和vue实例中的钩子函数都会执行，且mixin中的钩子函数会先执行；
3. 如果存在同名函数和对象，mixin会进行递归合并为数组，也就是说mixin混入对象在先，vue实例中的同名对象会覆盖mixin混入对象中的值，会执行vue实例中的同名对象。