使用Vue3构建更好的高阶组件译

掘金文章链接
Vue 3 即将发布，通过引入Composition API 。 它具有许多更改和性能改进。

高阶组件（HOC）是使用模板声明性地向您的应用程序添加某些功能的组件。 我相信即使引入了Composition API，它们仍将保持非常重要的关联。

HOC始终无法充分发挥其功能的全部功能，并且由于它们在大多数Vue应用程序中并不常见，因此它们的设计通常很差，可能会带来限制。 这是因为模板就是这样----模板或一种您表达某种逻辑的受约束的语言。 但是，在JavaScript或JSX环境中，表达逻辑要容易得多，因为您可以使用全部JavaScript。

Vue 3 带给桌面的是能够使用Composition API和声明性易用的模板无缝地混合和匹配JavaScript的表达能力。

我正在为各种逻辑（如网络，动画，UI和样式，实用程序和开源库）构建的应用程序中积极使用HOC。 我有一些技巧可以分享如何构建HOC，尤其是即将发布的Vue 3 Composition API。

1 The template

让我们假设以下Fetch组件。 在探讨如何实现这样的组件之前，您应该考虑如何使用组件。 然后，您需要决定如何实现它。 这与TDD类似，但没有经过测试-更像是在构思之前先尝试一下。

理想情况下，该组件将使用一个端点并将其结果作为范围限定的插槽属性返回：

<fetch endpoint="/api/users" v-slot="{ data }">
  <div v-if="data">
    <!-- Show the response data -->
  </div>
</fetch>

现在，尽管此API的基本目的是通过网络获取一些数据并显示它们，但仍有许多丢失的东西将是有用的。

让我们从错误处理开始。 理想情况下，我们希望能够检测到是否抛出了网络或响应错误，并向用户显示一些指示。 让我们将其运用到我们的代码中：

<fetch endpoint="/api/users" v-slot="{ data, error }">
  <div v-if="data">
    <!-- Show the response data -->
  </div>
  
  <div v-if="error">
    {
   {
    error.message }}
  </div>
</fetch>

到目前为止，一切都很好。 但是加载状态呢？ 如果我们走相同的道路，我们最终会得到这样的结果：

<fetch endpoint="/api/users" v-slot="{ data, error, loading }">
  <div v-if="data">
    <!-- Show the response data -->
  </div>
  
  <div v-if="error">
    {
   {
    error.message }}
  </div>
  
  <div v-if="loading">
    Loading....
  </div>
</fetch>

现在，假设我们需要分页支持：

<fetch endpoint="/api/users" v-slot="{ data, error, loading, nextPage, prevPage }">
  <div v-if="data">
    <!-- Show the response data -->
  </div>
  
  <div v-if="!loading">
    <button @click="prevPage">Prev Page</button>
    <button @click="nextPage">Next Page</button>
  </div>
  
  <div v-if="error">
    {
   {
    error.message }}
  </div>
  
  <div v-