Vue 组件抽离公共逻辑（高级）

mixin

• 多个组件有相同的逻辑，抽离出来
• mixin 并不是完美的解决方案，会有一些问题
• Vue 3 的 Composition API 旨在解决这些问题

首先有这样一段代码

<template>
    <div>
        <p>{{name}} {{major}} {{city}}</p>
        <button @click="showName">显示姓名</button>
    </div>
</template>
<script>
import myMixin from './mixin'
export default {
    mixins: [myMixin], // 可以添加多个，会自动合并起来
    data() {
        return {
            name: '张三',
            major: 'web 前端'
        }
    },
    methods: {
    },
    mounted() {
        // eslint-disable-next-line
        console.log('component mounted', this.name)
    }
}
</script>

而 mixin 是一个 mixin.js 文件

export default {
    data() {
        return {
            city: '深圳'
        }
    },
    methods: {
        showName() {
            // eslint-disable-next-line
            console.log(this.name)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('mixin mounted', this.name)
    }
} 

这就是 mixin 的用法，抽象出公共逻辑。但 mixin 也有问题：

• 变量来源不明确，不利于阅读

• 多个 mixin 可能会造成命名冲突

• mixin 和组件可能出现多对多的关系，复杂度较高