写个兼容Vue3和2的组件

起因

有个 Vue 项目用到 ECharts，组内几个前端菜鸟集成得乱七八糟的，于是考虑使用 ECharts 的包装组件。在研究了几个热门的封装组件后，发现存在依赖内置、过度封装、使用繁琐、不支持 Vue3 等问题，于是乎自己动手造轮子（>>成品传送门<<）。

Vue 3 的变化

Vue 3 并非完全颠覆性的版本，它向前兼容 Vue 2 的大部分写法。本文只对变更部分稍作介绍，详细内容请阅读官方文档。

1. 新增组合 API（Composition API），利于拆分代码、聚合逻辑关注点；
2. 全局 API 改由 ES 模块进行命名导出，有助于 Tree shaking 消除死代码；

import {
    createApp, nextTick } from 'vue';

3. render 函数不再接收 h 函数，改由全局 API 获取；

import {
    h } from 'vue';

4. VNode props 改为扁平结构；

// Vue 2
export default {
   
    render: () => h('div', {
   
        attrs: {
    id: 'wrapper' },
        domProps: {
    innerText: 'Hello World' },
        on: {
    click() {
   } },
    }),
}

// Vue 3
export default {
   
    render: () => h('div', {
   
        id