高阶函数和 JSX助力 Vue3 组合式 API 实现高阶组件：踩坑之旅

2024-02-15 21:51:50

缘由最近项目处于自我驱动状态，那么些东西就尽可能的往规范，长远，学习的角度去写。项目使用element-plus，vue3。

一、高阶组件和高阶函数

1. 高阶函数的特点

把一个函数当另一个函数的参数传参
固定，明确的输入和输出

例如：

function sum(a, b) {
  return a + b;
}

function callTwice(func, arg1, arg2) {
  func(arg1, arg2);
  func(arg1, arg2);
}

callTwice(sum, 1, 2); // 输出: 6

2. 高阶组件的特点

本质上就是一个函数，接收一个组件作为参数，返回一个新的组件
可以为组件添加功能，增强组件能力
具有复用性，可用于多个组件

例如：

import { h } from 'vue';

const withLoading = (Component) => {
  return {
    render() {
      return h('div', { class: 'loading-container' }, [
        h(Component),
        h('div', { class: 'loading' }),
      ]);
    },
  };
};

这个高阶组件可以将加载状态添加到任何组件中，使用时只需将组件作为参数传入即可：

import withLoading from './withLoading.js';

const MyComponent = {
  template: '<div>My Component</div>',
};

export default withLoading(MyComponent);

二、使用组合式 API 和 JSX 实现高阶组件

1. 组合式 API

组合式 API 是 Vue3 中一种新的 API，它允许您以更灵活的方式组织和管理组件逻辑。使用组合式 API，您可以将组件逻辑分解为更小的函数，然后组合这些函数来创建组件。这使得组件更加易于测试和维护。

2. JSX

JSX 是 JavaScript 的语法扩展，它允许您使用 HTML 语法来编写组件模板。JSX 使得组件模板更加清晰和易于阅读，并且可以提高组件开发效率。

3. 实现高阶组件

要使用组合式 API 和 JSX 实现高阶组件，您可以按照以下步骤操作：

创建一个新的 Vue 文件。
在 Vue 文件中，导入您要使用的组合式 API 和 JSX。
在 Vue 文件中，定义一个高阶组件函数。
在高阶组件函数中，使用组合式 API 和 JSX 来创建新的组件。
在 Vue 文件中，导出高阶组件函数。

例如，以下是一个使用组合式 API 和 JSX 实现的高阶组件：

import { h, ref } from 'vue';

const withLoading = (Component) => {
  return {
    setup() {
      const isLoading = ref(false);

      const startLoading = () => {
        isLoading.value = true;
      };

      const stopLoading = () => {
        isLoading.value = false;
      };

      return {
        isLoading,
        startLoading,
        stopLoading,
      };
    },
    render() {
      return h('div', { class: 'loading-container' }, [
        h(Component, { isLoading: this.isLoading }),
        h('div', { class: 'loading', v-if: this.isLoading }),
      ]);
    },
  };
};

这个高阶组件可以将加载状态添加到任何组件中，使用时只需将组件作为参数传入即可：

import withLoading from './withLoading.js';

const MyComponent = {
  template: '<div>My Component</div>',
};

export default withLoading(MyComponent);