Vue3第三方函数式组件的二次封装

Vue3中的第三方函数式组件通常是指那些基于Vue官方提供的Composition API或者setup语法编写的自定义组件，它们可以直接在模板中使用，无需显式的`<template>`和`<script>`部分。

二次封装主要是为了更好地适应项目需求，提高复用性和灵活性。当你需要对原始的函数式组件做以下操作时，可能会选择二次封装：

1. **增强功能**：添加额外的行为、生命周期钩子或其他内部逻辑，比如状态管理、事件处理等。
2. **修改外观**：改变组件的样式、布局或UI设计，使其更适合特定场景。
3. **提供默认配置**：为组件设置默认值，简化外部使用的复杂度。
4. **暴露API**：将组件内部的一些逻辑提取出来作为公共接口，方便外部更精细地控制组件行为。

二次封装通常涉及创建一个新的组件文件，将其导入并组合原有组件，同时在新的组件中添加封装后的逻辑。例如：

// 原始函数式组件
import MyComponent from 'third-party-component.vue';

// 二次封装
export default {
  name: 'CustomMyComponent',
  props: {
    // 增加或修改prop
  },
  setup(props) {
    const internalState = reactive({
      ...// 初始化状态
    });

    function handleButtonClick() {
      // 添加额外的行为
    }

    return {
      // 返回暴露给外部的接口
      internalState,
      buttonClick: handleButtonClick,
    };
  },
};