vue2【详解】mixins —— 抽离公共逻辑

朝阳392024-03-26 21:55

mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等

使用方法

创建文件myMixin.js

js 复制代码

export const myMixin = {
    data() {
        return {
            webName: '朝阳的博客'
        }
    },
    created() {
        alert(`欢迎来到${this.webName}`)
    },
    methods: {
        hi() {
            alert(`欢迎来到${this.webName}`)
        }
    }
}

vue文件中引入并使用myMixin.js

js 复制代码

import {myMixin} from './myMixin.js'

js 复制代码

export default {
    mixins: [myMixin],

mixins的值为一个数组，可以传入多个minxins

js 复制代码

 mixins: [myMixin1,myMixin2],

注意事项

mixins中的变量和方法与vue文件中的变量和方法同名时，vue文件中的变量和方法会覆盖mixins中的
mixins中函数（如生命周期钩子函数）会在vue中的函数之前执行
- 如mixins和vue中都有mounted生命周期钩子函数，则mixins中的先执行，vue文件中的后执行。
不同vue文件引入同一个mixins时，mixins中定义的变量都属于各自的vue实例，相互之间互不影响。
全局混入会影响每个单独创建的 Vue 实例，包括第三方组件，所以使用时格外小心。

mixins 的缺点

变量来源不明确，不利于阅读
多 mixin 可能会造成命名冲突
mixin 和组件可能出现多对多的关系，复杂度较高