面试题：什么是 Vue 的高阶组件？请举例说明

1. 什么是高阶组件？

高阶组件（Higher-Order Component，HOC）是一个函数，它接收一个组件并返回一个新的组件。高阶组件的主要目的是复用组件逻辑，而不是直接修改组件的代码。

在 Vue 中，高阶组件通常通过以下方式实现：

使用 render 函数或 JSX 创建一个包装组件。
在包装组件中增强或修改原始组件的功能。

2. 高阶组件的作用

逻辑复用：将通用的逻辑（如数据获取、权限校验）抽离到高阶组件中。
功能增强：在不修改原始组件的情况下，为其添加新的功能。
代码解耦：将组件的核心逻辑与附加逻辑分离，提高代码的可维护性。

3. Vue 高阶组件的实现

在 Vue 中，高阶组件可以通过以下方式实现：

使用 render 函数：创建一个包装组件，并在 render 函数中渲染原始组件。
使用 mixin：通过 mixin 混入通用逻辑（但 mixin 不是严格意义上的高阶组件）。
使用 scoped slots：通过作用域插槽传递增强的逻辑。

4. 示例：实现一个高阶组件

以下是一个简单的高阶组件示例，它为一个组件添加了加载状态的功能。

4.1 高阶组件代码

// withLoading.js
export default function withLoading(WrappedComponent) {
  return {
    data() {
      return {
        isLoading: false,
      };
    },
    methods: {
      startLoading() {
        this.isLoading = true;
      },
      stopLoading() {
        this.isLoading = false;
      },
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          ...this.$props, // 传递原始组件的 props
          isLoading: this.isLoading, // 注入加载状态
        },
        on: {
          ...this.$listeners, // 传递原始组件的事件
          startLoading: this.startLoading, // 注入加载方法
          stopLoading: this.stopLoading, // 注入停止加载方法
        },
      });
    },
  };
}

4.2 使用高阶组件

<template>
  <div>
    <button @click="fetchData">加载数据</button>
    <p v-if="isLoading">加载中...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
import withLoading from './withLoading';

export default withLoading({
  props: ['isLoading', 'startLoading', 'stopLoading'],
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      this.startLoading(); // 调用高阶组件注入的方法
      try {
        // 模拟异步请求
        this.data = await new Promise((resolve) => {
          setTimeout(() => resolve('数据加载完成'), 1000);
        });
      } finally {
        this.stopLoading(); // 调用高阶组件注入的方法
      }
    },
  },
});
</script>

4.3 父组件中使用

<template>
  <div>
    <EnhancedComponent />
  </div>
</template>

<script>
import EnhancedComponent from './EnhancedComponent';

export default {
  components: {
    EnhancedComponent,
  },
};
</script>

5. 示例解析

高阶组件 withLoading：
- 接收一个组件 WrappedComponent。
- 返回一个新的组件，包含 isLoading 状态和加载控制方法。
- 通过 render 函数渲染原始组件，并注入额外的 props 和方法。
增强后的组件：
- 使用高阶组件包装原始组件。
- 通过 props 接收 isLoading 状态和加载控制方法。
- 在 fetchData 方法中调用加载控制方法。
父组件：
- 直接使用增强后的组件，无需关心加载逻辑的实现。