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 和组件可能出现多对多的关系，复杂度较高

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

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