Vue3 Composition API 如何优雅封装第三方组件

在Vue 3的开发中，借助Composition API能够更加高效且优雅地封装第三方组件，提升代码的可维护性与复用性。

明确封装的目的。第三方组件可能在多个地方使用，通过封装可统一其样式与行为，还能对其功能进行扩展或简化。

以封装一个常见的图表组件为例，假设使用的是Echarts。在开始封装前，要分析该组件的参数与事件。Echarts需要传入图表的配置项，如数据、坐标轴信息等，同时可能会有点击图表元素等事件。

利用Composition API的setup函数来进行封装。在setup中，可以定义响应式数据来存储组件的状态。比如：

import { ref } from 'vue';
const chartOptions = ref({});

这里的chartOptions用来存储Echarts的配置项。接下来，可以通过函数来初始化和更新这些配置。

const initChartOptions = () => {
  chartOptions.value = {
    // 具体的图表配置
    title: {
      text: '示例图表'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }
    ]
  };
};

为了能让外部方便地控制图表，还可以将初始化函数暴露出去。

export default {
  setup() {
    const chartOptions = ref({});
    const initChartOptions = () => {
      // 配置项
    };
    return {
      chartOptions,
      initChartOptions
    };
  }
};

在模板中，就可以轻松引入并使用这个封装后的组件。

<template>
  <div id="chart"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { initChartOptions, chartOptions } from './chartWrapper.js';
import * as echarts from 'echarts';

onMounted(() => {
  initChartOptions();
  const chart = echarts.init(document.getElementById('chart'));
  chart.setOption(chartOptions.value);
});
</script>

通过这种方式，将第三方组件的复杂配置与逻辑封装在一个独立的模块中，在其他地方使用时只需简单引入和调用相关函数，极大地提高了代码的简洁性与可维护性。利用Composition API的特性，使得代码的逻辑更加清晰，便于后续的功能扩展与修改。