用Vue Demi 构建同时兼容Vue2与Vue3组件库

构建同时兼容Vue2与Vue3组件库是一个比较有挑战性的任务。使用Vue Demi 可以帮助我们简化此类任务的难度。下面我们将结合示例，一步步讲解如何使用Vue Demi 构建同时兼容Vue2与Vue3组件库。

1. 添加Vue Demi 依赖

首先在你的项目中安装Vue Demi。在终端中运行以下命令：

npm install vue-demi

Vue Demi 是为vue2和vue3提供的通用API库。它将为我们提供一个可以跨不同版本的Vue 创建组件的API。

2. 创建Vue2版本的组件

我们将创建一个Vue2版本的组件，并使用Vue Demi 的API来改写它。我们将以一个简单的按钮组件为例。

<template>
  <button class="my-button" @click="onClick">{{ label }}</button>
</template>

<script>
  export default {
    name: 'MyButton',
    props: {
      label: {
        type: String,
        default: 'Click Me'
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    }
  }
</script>

<style scoped>
  .my-button {
    background-color: blue;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
  }
</style>

3. 使用Vue Demi API更新Vue2组件

使用Vue Demi 的defineComponent函数重新定义Vue2版本的组件。

import { defineComponent } from "vue-demi"

export default defineComponent({
  name: 'MyButton',
  props: {
    label: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  },
  render() {
    return (
      <button class="my-button" onClick={this.onClick}>{this.label}</button>
    )
  }
})

通过以上改写后，该组件成为了可以在Vue2与Vue3中使用的兼容版组件。

示例1: 在Vue3中使用兼容版组件

在Vue3中使用该组件相对来说较为简单, 只需要正常的import操作即可。

<template>
  <MyButton label="Click Me" @click="handleClick" />
</template>

<script>
import MyButton from '@/components/MyButton';

export default {
  name: 'App',
  components: {
    MyButton
  },
  methods: {
    handleClick() {
      console.log('Button Clicked!')
    }
  }
}
</script>

示例2: 在Vue2中使用兼容版组件

在Vue2中使用兼容版组件将有些差别。为了使用Vue3中的兼容版组件，我们需要将它包裹在一个.vue2文件中，并使用createVNode来进行渲染。

<template>
  <MyButton label="Click Me" @click="handleClick" />
<template>

<script>
import { createVNode, render } from 'vue';
import MyButton from '@/components/MyButton';

export default {
  name: 'App',
  mounted(){
    const app = this.$el;

    render(createVNode(MyButton), app)
  },
  components: {
    MyButton
  },
  methods: {
    handleClick() {
      console.log('Button Clicked!')
    }
  }
}
</script>

通过这两个示例，我们可以看出在结合Vue Demi的使用中, 对Vue组件进行升级并在2/3中都能使用的情况是可行的。