vue_mixin混入

官网

vue_混入

基本概念

什么是Mixin

Mixin称为混入。其实Mixin不是Vue专属的，可以说它是一种思想，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin.

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

个人理解：混入就是将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可

混入和组件的区别

• 组件是将页面进行模块化，将某个经常使用的盒子的 html+css+js提取成公共组件，主要提取的是html+css；
• 混入提取的是公共逻辑或配置，主要提取的是js；

混入和vuex的区别

• Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化;
• Mixin中的数据和方法都是独立的，组件之间使用后是互不影响的;

mixin的优点

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

mixin的缺点

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

使用mixin

语法

mixin

mixin本质是一个对象，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、生命周期、watch、computed、filter等等。

{
 data(){
   return{
     // 数据
   }
 },
 methods:{
   // 方法
 }
}
1
2
3
4
5
6
7
8
9
10

局部混入-mixins

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，用于局部混入。

  mixins:[mixin]
1

配置步骤

• (1)编写mixin
• (2)在使用的组件引入，使用mixins配置

全局混入-Vue.mixin方法(不推荐)

Vue.mixin方法接受的参数是一个混入对象，通过此方法将该混入进行全局注册，这样混入中的逻辑可以在任何组件中使用。

Vue.mixin(mixin)
1

配置步骤

• (1)编写mixin
• (2)在main.js引入，使用Vue.mixin配置

mixin与组件合并逻辑

[1]data数据

总结

• 在mixin中定义的变量可以直接在组件中使用，使用方式与直接在组件data中定义的变量使用方式相同；
• 若是变量名冲突
  • 若是组件在data中定义了此变量，以组件中变量值为准；
  • 若是混入的多个mixin中存在变量冲突，后来者居上先引入的会被后引入的mixin覆盖

    // 若是mixData2与mixData存在同名变量，则mixData2中的变量会被覆盖
     mixins:[ mixData2, mixData ],
    1
    2

举例说明

(1)定义一个混入(位置不固定)

export default{
  data () {
    return{
      msg:'hello word',
    }
  }
}
1
2
3
4
5
6
7

(2)在组件中使用

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
import mixData from '../src/mixins/mixinTest'

export default {
  name: 'App',
  mixins:[ mixData ],
  methods:{
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(3)执行结果
在页面上显示hello word

[2]methods方法

总结

• 在mixin中定义的方法可以直接在组件中使用，使用方式与直接在组件methods中定义的方法使用方式相同；
• 若是方法名冲突
  • 若是组件在methods中定义了此方法，以组件中方法为准；
  • 若是混入的多个mixin中存在方法名冲突，后来者居上先引入的会被后引入的mixin覆盖

    // 若是mixData2与mixData存在同名方法，则mixData2中的方法会被覆盖
     mixins:[ mixData2, mixData ],
    1
    2

举例说明

(1)mixin

export default{
  data () {
    return{
      msg:'hello word',
    }
  },
  methods:{
    editMsg(value){
      this.msg = value
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

(2)组件中

<template>
  <div id="app">
    {{msg}}
    <button @click="editMsg(222)">去修改</button>
  </div>
</template>

<script>
import mixData from '../src/mixins/mixinTest'

export default {
  name: 'App',
  mixins:[ mixData ],
  methods:{
  },
 
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(3)执行结果
最初页面显示hello word ,当点击去修改按钮时页面内容变为222

[3]生命周期函数

总结

• mixin中的生命周期函数会和组件的生命周期函数一起合并执行
• 合并后的执行顺序：
  • 只引入1个mixin:先执行mixin中生命周期函数中的代码，然后在执行组件内部生命周期函数的代码;
  • 引入多个mixin:先引入的mixin的生命周期函数先执行，最后执行组件中的生命周期函数

     // 先执行mixData2的生命周期函数再执行mixData的生命周期函数
    mixins:[ mixData2, mixData ],
    1
    2

举例说明

(1) mixin

export default{
 data () {
   return{
     msg:'hello word',
   }
 },
 created () {
   console.log('我是子组件的created事件')
 },
 mounted () {
   console.log('我是子组件的mounted事件')
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

(2)组件中

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
import mixData from '../src/mixins/mixinTest'

export default {
  name: 'App',
  mixins:[ mixData ],
  methods:{
  },
  created () {
    console.log('我是父组件的created事件')
  },
  mounted () {
    console.log('我是父组件的mounted事件')
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(3)执行结果

问题：一个组件中修改了mixin中的数据，会对其他引用了mixin的组件造成影响吗？

不会！
原因：不同组件中的mixin是相互独立的