【Vue.js】之Vue组件如何抽离公共逻辑

Mixin

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

mixinDemo.vue

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