1. 什么是Mixin?
其实Mixin不是Vue专属的,可以说它是一种思想,通俗点讲就是混入,在很多开发框架中都实现了Mixin(混入),我们这里主要讲解的是Vue中的Mixin。
大白话解释:
将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余,也便于后期维护。
2. Mixin和Vuex的区别?
看到Mixin的解释后,似乎Vuex状态管理似乎也是做的这一件事,它也是将组件之间可能共享的数据抽离出来,不过两者还是有区别的
- Vuex公共状态管理,如果在一个组件中更改了Vuex中的某个数据,那么其它所有引用了Vuex中该数据的组件也会跟着变化。
- Mixin中的数据和方法都是独立的,组件之间使用后是互相不影响的。
3. Mixin的使用
- 先在src下定义一个
minxin
文件,可以在几个钩子函数内定义一些数据
data() {
return {}
},
computed: {},
created() {
console.log("我是mixin中的created生命周期函数");
},
2.局部混入
直接使用vue提供给我们的mixins属性:mixins:[mixins]。
<script>
import { mixins } from "./mixin/index";
export default {
name: "App",
mixins: [mixins],
components: {},
created(){
console.log("组件调用minxi数据",this.msg);
},
};
</script>
效果如下:
通过上面的代码和效果我们可以知道:
- mixin中的函数会和组件的函数会一起合并执行。
- 生命周期函数合并后执行顺序:先执行mixin中的,后执行组件的。
3.全局混入
这个就很简单啦~先全局把它注册好,这样我们就可以在任何组件中直接使用了
不过 Vue3
中的Composition
API可以代替Mixins
详情点击哈~