时间：2022-06-10 08:27:59 | 栏目：vue | 点击：次
我们在实际项目开发中,有很多基本相似功能模块,只是操作显示数据不同,很多逻辑和配置都是相同的
在Vue项目里,每个单文件组件都是一个模块组件,每个组件都有自己内部的数据和方法逻辑
如果每个单文件组件想要实现同样的功能
那么在每个单文件组件都要在逻辑业务代码里重复写一遍,这样在很多单文件组件内,到处都是从某一处复制粘贴过来的代码
在Vue当中,可以用封装组件来达到复用代码的目的,除了可以复用模板,那么逻辑,一些配置选项,是不是也可以公用?
当然是可以的,当只需要二次修改时,同样的逻辑的代码，只需要修改一处就可以了的
今天就来学习下Vue当中的这个mixin的,多个组件,当遇到相同的逻辑,是如何共用逻辑配置的
假设:现在有两个不同的按钮组件ButtonA,ButtonB,点击它弹出组件自身不同的属性
用Vue-cli脚手架创建一个项目,在components文件夹下分别创建ButtonA.vue,ButtonB.vue两个组件
以下是ButtonA组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
export default {
name: "ButtonA",
data() {
return {
name: "itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>
以下是ButtonB组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div>
<button @click="handleButton">按钮组件B</button>
</div>
</template>
<script>
export default {
name: "ButtonB",
data() {
return {
name: "video.itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
</style>
然后再App.vue当中引入两个ButtonA,ButtonB组件
<template>
<div id="app">
<ButtonA></ButtonA>
<ButtonB></ButtonB>
</div>
</template>
<script>
import ButtonA from "./components/ButtonA"
import ButtonB from "./components/ButtonB"
export default {
name: 'App',
components: {
ButtonA,
ButtonB
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
justify-content: center;
}
</style>
经过上面的几行代码,可以实现我们想要的目的,但是你会发现,他们的功能逻辑都是一样的,定义的方法名也都是一样的
如果一个项目里,有很多个这样的组件,只要想改,那么所有的单文件组件都得手动的修改一次,毫无疑问,重复性的代码也比较多,比较分散
对于不同组件间同样的配置,能不能提取出来共用一份呢,在Vue当中,提供了mixin
把多个组件共有的配置提取成一个混入对象,然后通过局部混入或者全局混入,以达到共用配置的目的,这就是mixin
官方文档: 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
翻译一下: 将组件的公共逻辑或者配置(包括data,方法,生命周期,甚至props等)提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易，改一处即可,不用到处去每个组件内修改配置
注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。也就是说，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高
那么组件与组件之间还有重复部分，比如逻辑业务的复用,我们还可以使用Mixin在抽离一遍
以下是经过mixin改写过的
在src文件夹下创建一个mixin文件夹(这个文件夹下全部放入一些混入),创建一个popButton.js文件,创建一个对象,然后暴露出去,如下所示
export const popButton = {
// 这里面组件选项的配置都是可以的,生命周期等,data属性,计算属性,监听属性等
methods: {
handleButton() {
alert(this.name);
}
}
}
然后再组件使用处引入即可,如下ButtonA组件,通过import引入,同时在组件配置选项中mixins:[引入的混入名],要是多个的话,用逗号分隔
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
import {popButton} from "../mixin/popButton.js"
export default {
name: "ButtonA",
mixins: [popButton],
data() {
return {
name: "itclan.cn"
}
},
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>
这种在组件内部,通过minxins:[混入名称],也被视为局部混入
局部混入也就是只在当前组件内起作用,与按需加载有些相似,也就是需要用到mixin中的代码时，我们再在组件内引入它
而全局混入的话，则代表我在项目的任何组件中都可以使用mixin,从根组件下至到它的任何一个组件都会用到混入
局部混入是,在需要的组件引入混入,通过import导入混入,在通过在组件的配置选项中通过minxins: [混入名称]
而全局混入,则是在项目代码中的main.js中去引入混入,在用Vue.mixin(混入名称)进行注册
这样任何一个组件,都可以使用混入了的,如下代码所示
import Vue from 'vue'
import App from './App.vue'
import {popButton} from "./mixin/popButton.js"
Vue.mixin(popButton);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
::: tip 注意事项 在使用全局混入时,应当格外小心,一旦使用全局混入,它将影响每一个之后创建的vue实例,也就是所有的vm,vc都会有混入
它与局部混入没有啥区别,虽然一次性注入混入很方便,但是也会带来一些问题,所有的组件实例,Vue实例都会有混入
在官方的特殊提示里,提到了,谨慎使用全局混入,因为它会影响每个单独创建的vue实例(包括第三方组件)
大多数情况下,只应当应用于自定义选项,就像上面示例一样,推荐将其作为插件发布,以避免重复应用混入 :::
如下代码
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
created() {
console.log("混入生命周期开始执行");
},
mounted() {
console.log("我是混入");
},
methods: {
handleButton() {
alert(this.name);
},
handleMounted() {
console.log("加载方法");
}
}
}
当组件和混入对象含有同名选项时,这些选项将以合适的方式进行合并
也就是说,当mixin中定义的数据,方法名与组件里的属性名,方法名同名时,会怎么样呢
会存在数据,和方法名的覆盖问题?谁覆盖谁?执行先后顺序是?
mixin里面可以有自己的生命周期函数，同组件一样,生命周期函数是自执行函数,在某个阶段会自动执行
它都是固定的,默认合并策略如下所示
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
beforeCreate() {
console.log("创建之前");
},
created() {
console.log("混入生命周期开始执行");
},
mounted() {
console.log("我是混入");
},
beforeUpdate() {
console.log("更新之前");
},
updated() {
console.log("更新之时");
},
beforeDestroy() {
console.log("销毁之前");
},
destroyed() {
console.log("销毁时");
},
methods: {
handleButton() {
alert(this.name);
},
handleMounted() {
console.log("加载方法");
}
}
}
若是方法重名,则后者组件内的方法会覆盖mixin中的方法
当mixin中的data数据与组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据
若是没有相同的话,会进行数据的合并
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
}
在同一个项目里,起相同的名称,是很容易遇到的,如果mixin中的方法名与引入mixin中组件的方法名一致时,那么以当前组件为准
既然mixin这么好用,那为什么不直接大量推荐使用?mixin可以复用组件的逻辑,这样可以节省很多代码,但是同样,也会带来一些问题
在某些单文件组件里,引入mixin,因为组件内可以调用mixin的方法和使用mixin中定义的数据,找上下文的时候,变得不是那么直观，要么通过阅读代码逐级向上进行查找,要么就是全局进行搜索查找
使用mixin时,不利于阅读,代码变得难以维护
因为组件里可以引入多个mixin,并直接隐式的调用mixin里面的变量和方法,这会让写代码的人看着有些混乱,区分不出这些变量和方法,分别是哪个mixin的
所以这里建议是：但凡mixin的方法,统一放到mixin文件夹下进行管理的
当遇到组件中定义的属性,方法与minxin当中的出现相同时,后者组件的属性会覆盖mixin中的属性
一个组件可以引用多个mixins一个mixins也可以被多个组件引用,因为是共用逻辑,所以在关系上,不是很明确
不好追溯代码,排查问题,可以利用工具vscode全局搜索,如果是很多个地方用到了的mixin那么就得挨个的检查
如果滥用mixin的话,会让代码变得难以维护
如果是用了全局混入,在审查代码时,在任何一组件当中会莫名的多出一些属性和方法,会令新的同学很困惑,如果对mixin很熟悉的话,那没什么,如果不熟悉
那么就非常苦恼,这个变量名和方法,我在组件当中明明没有定义,但是为啥能使用呢,带来一些困惑
注意
如果一个功能,逻辑,一开始就很确定,它以后是不会动的,那么就可以使用mixin
mixin是在vue当中复用逻辑,精简代码的一种思想,相当于就是提取组件当中的公共配置属性,方法，可以使用mixins:[混入名称]局部混入,也可以在main.js中Vue.mixin(混入名称),全局混入
给封装复用代码带来了很多方便,但是也不要滥用它,有些场景非常适合,但是有些场景使用过多了,也会带来一些不可预知的问题
一般封装公共组件就比较适合使用mixin,还有做数据可视化时,当组件层级较多,想要从同一个数据源抽出公共的数据时,也可以使用mixin
在阅读一些优秀的项目时,也会看到很多项目里有使用mixin的