Vue3怎么实现组件级基类

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Vue3怎么实现组件级基类》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

使用 mixins、extends

vue3提供了 mixins和extends，但是尝试之后发现这两种方法只支持纯OptionAPI，设置的data会被识别，但是设置的setup里return 的 reactive，完全无效，setup也没有被执行。
所以这种方式只能使用于第一种方式。

使用 hooks （function、class）

既然官方没有提供，那么我们自己来想想办法。我们先观察一下组件的代码（第二种情况）：

  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'ui-core-',
    components: {
      // 注册共用组件
    },
    props: {
      // 定义共用属性
    },
    setup(props, context) {
      // 各种共用操作
      _logger()
      _setTitle()
      // 共用成员
      const foo = reactive ({})
      return {
        foo
      }
    }
  })

defineComponent 方法接收一个对象，对象需要有特定的几个属性，比如name、components、props、setup等。
那么也就是说，我们可以做一个函数返回这样的对象即可。
比如我们先建立一个js（或则ts）文件：

export function base (name, callback) {
  return {
    name: 'ui-' + name,
    components: {
      // 注册共用组件
    },
    props: {
      // 定义共用属性
    },
    setup(props, context) {
      // 各种共用操作
      _logger()
      _setTitle()
      // 共用成员
      const foo = reactive ({})
      // 执行其他操作
      const re = callback(props, context)
      return {
        foo,
        ...re
      }
    }
  }
}

有点像模板模式。

传入name和一个回调函数，props, context作为参数进行传递。内部成员也可以作为参数传递。
这样一个简单的基类就做成了，如果你觉得function不好看，那么可以换成class。

export default class BaseComponent {
  name: string
  components: any
  props: any
  setup: any
  constructor (name: string, callback: (props: any, context: any) => any) {
    this.name = name
    this.components = {}
    this.props = {}
    this.setup = (props: any, context: any) => {
      // 各种共用操作
      _logger()
      _setTitle()
      // 执行其他操作
      const re = callback(props, context)
      return {
        ...re
      }
    }
  }
}

有了class之后，还可以设置子类，不过感觉有点繁琐。总之，反正可以实现就对了。

script setup怎么办

上述这种方法应该也是可以支持纯composition API的，但是有点小问题，defineProps 和 defineEmits 并不是普通 js 函数，而是一种“宏”。
引用官网的解释：

defineProps 和 defineEmits 都是只能在