vue中混入(mixin)的特性及使用

985 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第10天,点击查看活动详情

前言

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。这是官文v2.x版本给出的解释。我个人的理解:mixin是一个js文件,js文件中是一个对象,对象里包含了.vue文件中的各个项(比如:data、computed、watch、methods等等)

mixin的作用

mixin的作用是当多个组件都需要相同的数据或者某些功能的话就可以把这些内容提取出来写成一个mixin,然后在需要这些东西的组件中引入就可以了,这样做的好处是减少了重复的代码量,并且维护起来也更方便。

mixin的使用方法

  • mixin是一个对象,我们要通过export把它导出
  • 在需要使用的页面通过mixins:[mixin的名字]引入,这是局部混入
  • 也可以全局混入,直接在main.js中写入如下代码即可
Vue.mixin({
    //需要什么写什么就行,比如data,created
    data(){},
    created(){}
})

但使用全局混入的时候一定要小心,因为混入的这个东西会对所有的组件都起作用,一定要慎用

mixin的特性

  • 混入的生命周期会优先于vue文件的生命周期执行
  • 如果混入的内容和vue文件中的内容冲突了(数据名字或方法名一样了),那么会以vue文件中的内容为住
  • mixin中的内容在多个vue文件之间是没有联系的,都是独立的,这和vuex有这明显的不同,vuex中,如果某个组件改变了vuex中的数据,所以使用了这个数据的组件都会产生变化,而mixin则不会,它只会影响到当前组件
  • 和公共组件相比:公共组件被引入到vue文件中,公共组件是一个子组件,他们的数据通信需要通过props及自定义事件;mixin则不同,它相当于融合成了一个新的vue组件,不存在什么通信问题
  • 如果一个文件中引入了多个mixin,那么按顺序执行,也就是说谁在前谁先执行

总结

mixin一句话来说就是如果有多个vue文件都用到了相同的属性和方法就可以抽离出来写成一个mixin。上面说了它的优点,这里也提一下它的缺点,那就是隐式依赖,什么是隐式依赖了,就比如你有个方法是goHome方法,当你需要更改goHome的参数的时候你很难找到它在哪里,因为goHome可能存在于任何一个mixin中,并且mixin直接可能存在依赖关系,所以你的一个看起来简单的修改可能引起很多的问题。并且这种关系也会导致某些方法的调用你找不到在哪里,比如this.goHome,你在ide中使用ctrl+f是找不到的,你只能复制,粘贴,全局去搜索。

mixin的使用一定要小心,决不能无脑的往一个mixin中增加数据和方法,并且vue并不很推荐使用它,vue3也做了一些更改,有兴趣的可以看看