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

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

使用方法

1. 创建文件myMixin.js

export const myMixin = {
    data() {
        return {
            webName: '朝阳的博客'
        }
    },
    created() {
        alert(`欢迎来到${this.webName}`)
    },
    methods: {
        hi() {
            alert(`欢迎来到${this.webName}`)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

export default {
    mixins: [myMixin],
1
2

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

 mixins: [myMixin1,myMixin2],
1

注意事项

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

mixins 的缺点

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