前端 Vue 中如何实现高阶组件的能力，组合式 API 可以替代高阶组件吗

// 前端 Vue 中如何实现高阶组件的能力，组合式 API 可以替代高阶组件吗？

// 答案是肯定的，组合式 API 可以有效地替代高阶组件（HOCs），并且在很多情况下，使用组合式 API 会更加简洁和灵活。

// 首先，我们来理解一下什么是高阶组件（HOCs）。

// 高阶组件（Higher-Order Components - HOCs）是一个在 React 和 Vue 等组件化框架中常见的概念。
// 简单来说，高阶组件就是一个函数，它接收一个组件作为参数，并返回一个新的增强后的组件。
// 这种模式允许我们复用组件的逻辑，实现代码的横向切割，避免代码的重复。

// 在 Vue 2.x 中，实现高阶组件通常有以下几种方式：

// 1. 属性代理（Props Proxy）：HOC 接收一个组件，返回一个新的组件，
//    新的组件渲染传入的组件，并在渲染过程中可能会修改或添加 props。

// 2. 继承（Inheritance Inversion）：HOC 接收一个组件，返回一个新的组件，
//    新的组件继承传入的组件，从而可以访问和控制传入组件的实例和生命周期。

// 下面我们分别用 Vue 2.x 的 Options API 来演示这两种方式：

// 属性代理的例子：
function withLoading(WrappedComponent) {
  return {
    name: `WithLoading${WrappedComponent.name}`,
    props: WrappedComponent.props,
    data() {
      return {
        isLoading: false,
      };
    },
    methods: {
      startLoading() {
        this.isLoading = true;
      },
      stopLoading() {
        this.isLoading = false;
      },
    },
    render(h) {
      const props = {
        ...this.$props,
        isLoading: this.isLoading,
        startLoading: this.startLoading,
        stopLoading: this.stopLoading,
      };
      return h(WrappedComponent, props);
    },
  };
}

// 使用 withLoading HOC
// 假设我们有一个需要加载数据的组件 MyComponent
/*
import Vue from 'vue';

const MyComponent = Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  props: ['isLoading'],
  data() {
    return {
      message: '数据加载中...',
    };
  },
  watch: {
    isLoading(newVal) {
      if (!newVal) {
        this.message = '数据加载完成！';
      }
    },
  },
  mounted() {
    this.$emit('start-loading');
    setTimeout(() => {
      this.$emit('stop-loading');
    }, 2000);
  },
});

const EnhancedComponent = withLoading(MyComponent);

new Vue({
  el: '#app',
  components: {
    EnhancedComponent,
  },
  template: '<enhanced-component @start-loading="start" @stop-loading="stop" :isLoading="loading" />',
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    start() {
      this.loading = true;
    },
    stop() {
      this.loading = false;
    },
  },
});
*/

// 继承的例子：
function withLogging(WrappedComponent) {
  return {
    name: `WithLogging${WrappedComponent.name}`,
    extends: WrappedComponent,
    mounted() {
      console.log(`${WrappedComponent.name} 组件已挂载`);
      if (WrappedComponent.mounted) {
        WrappedComponent.mounted.call(this);
      }
    },
    methods: {
      log(message) {
        console.log(`[${WrappedComponent.name}]: ${message}`);
      },
    },
  };
}

// 使用 withLogging HOC
/*
import Vue from 'vue';

const AnotherComponent = Vue.component('another-component', {
  template: '<div>{{ text }}</div>',
  data() {
    return {
      text: 'Hello from AnotherComponent',
    };
  },
  mounted() {
    this.$parent.log('AnotherComponent 自己的 mounted 钩子');
  },
});

const LoggedComponent = withLogging(AnotherComponent);

new Vue({
  el: '#app',
  components: {
    LoggedComponent,
  },
  template: '<logged-component />',
  mounted() {
    this.$refs.loggedComponent.log('来自父组件的日志');
  },
});
*/

// 高阶组件的优点：
// 1. 逻辑复用：可以将通用的逻辑抽离出来，在多个组件之间共享。
// 2. 代码组织：可以使组件的职责更加单一，提高代码的可维护性。
// 3. 增强组件：可以在不修改原有组件代码的情况下，为其添加新的功能。

// 高阶组件的缺点：
// 1. 组件嵌套过深：多层 HOC 嵌套会导致组件结构复杂，调试困难。
// 2. Props 命名冲突：不同的 HOC 可能会注入相同的 props，导致命名冲突。
// 3. 性能问题：过多的 HOC 可能会增加组件渲染的开销。
// 4. 类型推断困难：在使用 TypeScript 时，HOC 可能会使类型推断变得复杂。

// 接下来，我们来看看 Vue 3.x 的组合式 API 如何替代高阶组件。

// 组合式 API 的核心思想是将组件的逻辑按照功能进行组织，而不是按照 Options API 的 data、methods、computed 等进行划分。
// 通过使用 `setup` 函数，我们可以在组件内部定义响应式状态、计算属性、方法以及生命周期钩子。
// 最重要的是，我们可以将可复用的逻辑提取到独立的函数中，这些函数被称为“组合式函数”（Composables）。

// 我们可以创建一个组合式函数来实现类似 `withLoading` HOC 的功能：
import { ref } from 'vue';

function useLoading() {
  const isLoading = ref(false);
  const startLoading = () => {
    isLoading.value = true;
  };
  const stopLoading = () => {
    isLoading.value = false;
  };

  return {
    isLoading,
    startLoading,
    stopLoading,
  };
}

// 在组件中使用 useLoading 组合式函数：
/*
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CompositionApiComponent',
  setup() {
    const { isLoading, startLoading, stopLoading } = useLoading();
    const message = ref('数据加载中...');

    onMounted(() => {
      startLoading();
      setTimeout(() => {
        message.value = '数据加载完成！';
        stopLoading();
      }, 2000);
    });

    return {
      isLoading,
      message,
    };
  },
  template: '<div>{{ isLoading ? "加载中..." : message }}</div>',
});
*/

// 我们可以创建另一个组合式函数来实现类似 `withLogging` HOC 的功能：
function useLogging(componentName: string) {
  const log = (message: string) => {
    console.log(`[${componentName}]: ${message}`);
  };

  onMounted(() => {
    log('组件已挂载');
  });

  return {
    log,
  };
}

// 在组件中使用 useLogging 组合式函数：
/*
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'AnotherCompositionApiComponent',
  setup() {
    const { log } = useLogging('AnotherCompositionApiComponent');
    const text = ref('Hello from AnotherCompositionApiComponent');

    onMounted(() => {
      log('AnotherCompositionApiComponent 自己的 mounted 钩子');
    });

    return {
      text,
    };
  },
  template: '<div>{{ text }}</div>',
});
*/

// 组合式 API 替代高阶组件的优势：

// 1. 更清晰的逻辑组织：组合式 API 允许我们按照功能将代码组织在一起，而不是分散在不同的 Options 中。
// 2. 更强的代码复用性：组合式函数可以被多个组件复用，避免了 HOC 可能导致的组件嵌套问题。
// 3. 更好的类型推断：在使用 TypeScript 时，组合式 API 提供了更好的类型支持，更容易进行类型推断。
// 4. 更少的命名冲突：组合式函数返回的是明确的变量和方法，不容易出现命名冲突。
// 5. 更灵活的组合方式：我们可以根据需要组合多个组合式函数，实现更复杂的逻辑。
// 6. 避免了组件嵌套：使用组合式 API 不会像 HOC 那样增加组件的嵌套层级，使得组件结构更清晰。
// 7. 更好的性能：由于避免了额外的组件包装，使用组合式 API 在某些情况下可能具有更好的性能。

// 让我们看一个更复杂的例子，模拟一个需要用户认证的场景。

// 使用 HOC 实现用户认证：
function withAuth(WrappedComponent) {
  return {
    name: `WithAuth${WrappedComponent.name}`,
    data() {
      return {
        isAuthenticated: false,
      };
    },
    created() {
      // 模拟认证检查
      setTimeout(() => {
        this.isAuthenticated = true;
      }, 1000);
    },
    render(h) {
      if (this.isAuthenticated) {
        return h(WrappedComponent, this.$props);
      } else {
        return h('div', ['请先登录']);
      }
    },
  };
}

// 使用 withAuth HOC
/*
import Vue from 'vue';

const SecretComponent = Vue.component('secret-component', {
  template: '<div>只有登录用户才能看到的内容</div>',
});

const AuthComponent = withAuth(SecretComponent);

new Vue({
  el: '#app',
  components: {
    AuthComponent,
  },
  template: '<auth-component />',
});
*/

// 使用组合式 API 实现用户认证：
import { ref, onMounted } from 'vue';

function useAuth() {
  const isAuthenticated = ref(false);

  onMounted(() => {
    // 模拟认证检查
    setTimeout(() => {
      isAuthenticated.value = true;
    }, 1000);
  });

  return {
    isAuthenticated,
  };
}

// 在组件中使用 useAuth 组合式函数：
/*
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CompositionApiAuthComponent',
  setup() {
    const { isAuthenticated } = useAuth();

    return {
      isAuthenticated,
    };
  },
  template: '<div v-if="isAuthenticated">只有登录用户才能看到的内容</div><div v-else>请先登录</div>',
});
*/

// 通过对比可以看出，使用组合式 API 实现相同的功能，代码更加简洁直观。
// 组合式函数 `useAuth` 封装了认证逻辑，组件只需要调用这个函数就可以获得认证状态。

// 总结：

// 组合式 API 是 Vue 3 中推荐的逻辑复用方式，它可以有效地替代高阶组件。
// 相比于 HOC，组合式 API 具有更好的代码组织、复用性、类型支持和更少的潜在问题。
// 在新的 Vue 项目中，应该优先考虑使用组合式 API 来实现逻辑的复用。

// 尽管如此，理解高阶组件的概念仍然是有价值的，因为在一些旧的代码库或者与其他框架交互时，可能会遇到 HOC 的使用。

// 组合式 API 的灵活性还体现在可以组合多个组合式函数来构建复杂的逻辑。
// 例如，我们可以将 `useLoading` 和 `useAuth` 组合在一起：

function useAuthAndLoading() {
  const { isAuthenticated } = useAuth();
  const { isLoading, startLoading, stopLoading } = useLoading();

  return {
    isAuthenticated,
    isLoading,
    startLoading,
    stopLoading,
  };
}

// 在组件中使用组合后的逻辑：
/*
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'CombinedComponent',
  setup() {
    const { isAuthenticated, isLoading, startLoading, stopLoading } = useAuthAndLoading();
    const data = ref(null);

    onMounted(() => {
      if (isAuthenticated.value) {
        startLoading();
        // 模拟数据加载
        setTimeout(() => {
          data.value = { message: '加载成功' };
          stopLoading();
        }, 1500);
      }
    });

    return {
      isAuthenticated,
      isLoading,
      data,
    };
  },
  template: `
    <div>
      <div v-if="!isAuthenticated">请先登录</div>
      <div v-else-if="isLoading">加载中...</div>
      <div v-else-if="data">{{ data.message }}</div>
    </div>
  `,
});
*/

// 这种组合方式非常强大，可以根据需要灵活地组合不同的逻辑片段。

// 最后，需要注意的是，虽然组合式 API 在很多方面优于 HOC，但 HOC 仍然有其存在的价值。
// 例如，在某些特定的场景下，使用 HOC 可以更方便地修改组件的渲染行为或者注入特定的 props。
// 然而，对于大多数逻辑复用的需求，组合式 API 提供了更优雅和强大的解决方案。

// 总而言之，组合式 API 是 Vue 3 中实现高阶组件能力的更优选择。它通过提供一种更灵活、更清晰的方式来组织和复用组件逻辑，有效地解决了 HOC 存在的一些问题。在新的 Vue 项目开发中，应该优先考虑使用组合式 API 来替代高阶组件。