vue组件如何抽离公众逻辑

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

演示

新建一个 mixin 文件

/* myMixin.js */
export default {
    data () {
      return {
        city: "beijing"
    }
  },
  methods: {
      showName() {
        console.log(this.name)
    }
  },
  mounted() {
      console.log('mixin mounted', this.name)
  }
}

调用myMixin文件的页面

<template>
  <div>
    <p>{{name}} {{major}} {{city}}</p>
    <button @click="showName">显示姓名</button>
  </div>
</template>
<script>
import mixin from '@/mymMixin.js'
export default {
  mixins: [mixin], // [mixin1, mixin2, mixin3] 多个的情况
  data () {
    return {
      name: 'zwx',
      major: 'web'
    }
  },
  mounted () {
    console.log('component mounted', this.name)
  }
}
</script>

父页面中可以调取mixin文件里面的数据，mixin文件也可以调取父页面中的数据。这也导致了mixin变量来源不明确，不利于阅读且容易命名冲突与且如果多对多，复杂度较高

mixin的问题

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