vuejs中使用mixin局部混入/全局混入的方法详解

目录

• 前言
• 需求
• 什么是mixin
• 全局混入
• 几个重要的疑问
• 选项合并
• 生命周期函数
• data数据冲突
• 方法名冲突
• mixin的优缺点
• 1.变量名来源不明确
• 2. 多个mixins的生命周期会合并融合到一起运行,但是同名属性,同名方法无法融合,会导致冲突或覆盖
• 3. mixins和组件可能出现多对多的关系,复杂度会变高
• mixin优点
• 总结

前言

我们在实际项目开发中,有很多基本相似功能模块,只是操作显示数据不同,很多逻辑和配置都是相同的

在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

官方文档: 混入 (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实例(包括第三方组件)

大多数情况下,只应当应用于自定义选项,就像上面示例一样,推荐将其作为插件发布,以避免重复应用混入 :::

几个重要的疑问

• mixin中的生命周期函数会和组件的生命周期一起合并执行
• mixin中的data数据在组件中可以使用
• mixin中的方法在组件内部可以直接调用
• 生命周期函数合并后执行顺序:先执行mixin中的,然后执行组件的
• mounted不会合并,都会加载一遍
• 不同组件中的mixin是相互独立的,改变一个组件中mixin中的数据,另一个引用了mixin的组件不会受影响

如下代码

export const popButton  = {
    data() {
        return {
            name: "川川",
            age: 18
        }
    },
    created() {
        console.log("混入生命周期开始执行");
    },
    mounted() {
        console.log("我是混入");
    },
    methods: {
        handleButton() {
            alert(this.name);
        },
        handleMounted() {
            console.log("加载方法");
        }
    }
}

选项合并

当组件和混入对象含有同名选项时,这些选项将以合适的方式进行合并

也就是说,当mixin中定义的数据,方法名与组件里的属性名,方法名同名时,会怎么样呢

会存在数据,和方法名的覆盖问题?谁覆盖谁?执行先后顺序是?

生命周期函数

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中的方法

data数据冲突

当mixin中的data数据与组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据

若是没有相同的话,会进行数据的合并

export const popButton  = {
    data() {
        return {
            name: "川川",
            age: 18
        }
    },
}

方法名冲突

在同一个项目里,起相同的名称,是很容易遇到的,如果mixin中的方法名与引入mixin中组件的方法名一致时,那么以当前组件为准

mixin的优缺点

既然mixin这么好用,那为什么不直接大量推荐使用?mixin可以复用组件的逻辑,这样可以节省很多代码,但是同样,也会带来一些问题

1.变量名来源不明确

在某些单文件组件里,引入mixin,因为组件内可以调用mixin的方法和使用mixin中定义的数据,找上下文的时候,变得不是那么直观，要么通过阅读代码逐级向上进行查找,要么就是全局进行搜索查找

使用mixin时,不利于阅读,代码变得难以维护

因为组件里可以引入多个mixin,并直接隐式的调用mixin里面的变量和方法,这会让写代码的人看着有些混乱,区分不出这些变量和方法,分别是哪个mixin的

所以这里建议是：但凡mixin的方法,统一放到mixin文件夹下进行管理的

2. 多个mixins的生命周期会合并融合到一起运行,但是同名属性,同名方法无法融合,会导致冲突或覆盖

当遇到组件中定义的属性,方法与minxin当中的出现相同时,后者组件的属性会覆盖mixin中的属性

3. mixins和组件可能出现多对多的关系,复杂度会变高

一个组件可以引用多个mixins一个mixins也可以被多个组件引用,因为是共用逻辑,所以在关系上,不是很明确

不好追溯代码,排查问题,可以利用工具vscode全局搜索,如果是很多个地方用到了的mixin那么就得挨个的检查

如果滥用mixin的话,会让代码变得难以维护

如果是用了全局混入,在审查代码时,在任何一组件当中会莫名的多出一些属性和方法,会令新的同学很困惑,如果对mixin很熟悉的话,那没什么,如果不熟悉

那么就非常苦恼,这个变量名和方法,我在组件当中明明没有定义,但是为啥能使用呢,带来一些困惑

注意

如果一个功能,逻辑,一开始就很确定,它以后是不会动的,那么就可以使用mixin

mixin优点

• 提高组件代码复用性
• 无需传递状态
• 维护方便,只需要修改一处地方就可以,全局混入,应当谨慎使用

总结

mixin是在vue当中复用逻辑,精简代码的一种思想,相当于就是提取组件当中的公共配置属性,方法，可以使用mixins:[混入名称]局部混入,也可以在main.js中Vue.mixin(混入名称),全局混入

给封装复用代码带来了很多方便,但是也不要滥用它,有些场景非常适合,但是有些场景使用过多了,也会带来一些不可预知的问题

一般封装公共组件就比较适合使用mixin,还有做数据可视化时,当组件层级较多,想要从同一个数据源抽出公共的数据时,也可以使用mixin

在阅读一些优秀的项目时,也会看到很多项目里有使用mixin的

到此这篇关于vuejs中使用mixin局部混入/全局混入的文章就介绍到这了,更多相关vuejs使用mixin局部/全局混入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！