vue_mixin混入

官网

vue_混入

基本概念

什么是Mixin

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

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

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

混入和组件的区别

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

混入和vuex的区别

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

mixin的优点

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

mixin的缺点

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

使用mixin

语法

mixin

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

{
data(){
return{
// 数据
}
},
methods:{
// 方法
}
}


局部混入-mixins

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

mixins:[mixin]


配置步骤

• (1)编写mixin
• (2)在使用的组件引入&＃xff0c;使用mixins配置

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

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

Vue.mixin(mixin)


配置步骤

• (1)编写mixin
• (2)在main.js引入&＃xff0c;使用Vue.mixin配置

mixin与组件合并逻辑

[1]data数据

总结

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

    // 若是mixData2与mixData存在同名变量&＃xff0c;则mixData2中的变量会被覆盖
mixins:[ mixData2, mixData ],


举例说明

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

export default{
data () {
return{
msg:&＃39;hello word&＃39;,
}
}
}


(2)在组件中使用

<template>
<div id&＃61;"app">
{{msg}}
</div>
</template>
<script>
import mixData from &＃39;../src/mixins/mixinTest&＃39;
export default {
name: &＃39;App&＃39;,
mixins:[ mixData ],
methods:{
}
}
</script>


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

[2]methods方法

总结

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

    // 若是mixData2与mixData存在同名方法&＃xff0c;则mixData2中的方法会被覆盖
mixins:[ mixData2, mixData ],


举例说明

(1)mixin

export default{
data () {
return{
msg:&＃39;hello word&＃39;,
}
},
methods:{
editMsg(value){
this.msg &＃61; value
}
}
}


(2)组件中

<template>
<div id&＃61;"app">
{{msg}}
<button &＃64;click&＃61;"editMsg(222)">去修改</button>
</div>
</template>
<script>
import mixData from &＃39;../src/mixins/mixinTest&＃39;
export default {
name: &＃39;App&＃39;,
mixins:[ mixData ],
methods:{
},

}
</script>


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

[3]生命周期函数

总结

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

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


举例说明

(1) mixin

export default{
data () {
return{
msg:&＃39;hello word&＃39;,
}
},
created () {
console.log(&＃39;我是子组件的created事件&＃39;)
},
mounted () {
console.log(&＃39;我是子组件的mounted事件&＃39;)
}
}


(2)组件中

<template>
<div id&＃61;"app">
{{msg}}
</div>
</template>
<script>
import mixData from &＃39;../src/mixins/mixinTest&＃39;
export default {
name: &＃39;App&＃39;,
mixins:[ mixData ],
methods:{
},
created () {
console.log(&＃39;我是父组件的created事件&＃39;)
},
mounted () {
console.log(&＃39;我是父组件的mounted事件&＃39;)
}
}
</script>


(3)执行结果

问题&＃xff1a;一个组件中修改了mixin中的数据&＃xff0c;会对其他引用了mixin的组件造成影响吗&＃xff1f;

不会&＃xff01;
原因&＃xff1a;不同组件中的mixin是相互独立的