注册    登录
今天看啥  ›  专栏  ›  晨曦时梦见兮

Vue 进阶必学之高阶组件 HOC（保姆式教学，冲击20k必备）

晨曦时梦见兮  · 掘金  ·  · 2020-04-07 00:44

文章预览

阅读 715

Vue 进阶必学之高阶组件 HOC（保姆式教学，冲击20k必备）

高阶组件这个概念在 React 中一度非常流行，但是在 Vue 的社区里讨论的不多，掘金里很多关于 Vue 进阶技巧的帖子我也都看过，大部分无外乎讲的是什么 deep watch、 Vue.extends 等烂大街的技巧，本篇文章就真正的带你来玩一个进阶的骚操作。

先和大家说好，本篇文章的核心是学会这样的思想，也就是 容器 和 木偶 组件的解耦合，这可以有很多方式，比如 slot-scopes，比如未来的composition-api。本篇所写的代码也不推荐用到生产环境，生产环境有更成熟的库去使用，这篇强调的是 思想，顺便把 React 社区的玩法移植过来皮一下。

不要喷我，不要喷我，不要喷我，此篇只为演示高阶组件的思路，如果实际业务中想要简化文中所提到的异步状态管理，请使用基于 slot-scopes 的开源库 vue-promised

另外标题中提到的 20k 其实有点标题党，我更多的想表达的是我们要有这样的精神，只会这一个技巧肯定不能让你达到 20k。但我相信只要大家有这样钻研高级用法，不断优化业务代码，不断提效的的精神，我们总会达到的，而且这一天不会很远。

例子

本文就以平常开发中最常见的需求，也就是异步数据的请求为例，先来个普通玩家的写法：

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{result.name}}!</div>
</template>

<script>
export default {
  data() {
    return {
        result: {
          name: '',
        },
        loading: false,
        error: false,
    },
  },
  async created() {
      try {
        // 管理loading
        this.loading = true
        // 取数据
        const data = await this.$axios('/api/user')  
        this.data = data
      } catch (e) {
        // 管理error
        this.error = true  
      } finally {
        // 管理loading
        this.loading = false
      }
  },
}
</script>
复制代码

一般我们都这样写，平常也没感觉有啥问题，但是其实我们每次在写异步请求的时候都要有 loading、 error 状态，都需要有 取数据 的逻辑，并且要管理这些状态。

那么想个办法抽象它？好像特别好的办法也不多，React 社区在 Hook 流行之前，经常用 HOC（high order component） 也就是高阶组件来处理这样的抽象。

高阶组件是什么？

说到这里，我们就要思考一下高阶组件到底是什么概念，其实说到底，高阶组件就是：

一个函数接受一个组件为参数，返回一个包装后的组件。

在 React 中

在 React 里，组件是 Class，所以高阶组件有时候会用 装饰器 语法来实现，因为 装饰器 的本质也是接受一个 Class 返回一个新的 Class。

在 React 的世界里，高阶组件就是 f(Class) -> 新的Class。

在 Vue 中

在 Vue 的世界里，组件是一个对象，所以高阶组件就是一个函数接受一个对象，返回一个新的包装好的对象。

类比到 Vue 的世界里，高阶组件就是 f(object) -> 新的object。

实现

有了这个思路，我们就开始尝试实现。

首先上文提到了，HOC 是个函数，本次我们的需求是实现请求管理的 HOC，那么先定义它接受两个参数

  1. wrapped 也就是需要被包裹的组件对象。
  2. promiseFunc 也就是请求对应的函数，需要返回一个 Promise

并且 loading、error 等状态，还有 加载中、加载错误 等对应的视图，我们都要在 新返回的包装组件 中定义好。

const withPromise = (wrapped, promiseFn) => {
  return {
    name: "with-promise",
    data() {
      return {
        loading: false,
        error: false,
        result: null,
      };
    },
    async mounted() {
      this.loading = true;
      const result = await promiseFn().finally(() => {
        this.loading = false;
      });
      this.result = result;
    },
  };
};
复制代码

看起来不错了，但是函数里我们好像不能像在 .vue 单文件里去书写 template 那样书写模板了，

但是我们又知道模板最终还是被编译成组件对象上的 render 函数，那我们就直接写这个 render 函数。（注意，本例子是因为便于演示才使用的原始语法，脚手架创建的项目可以直接用 jsx 语法。）

const withPromise = (wrapped, promiseFn) => {
  return {
    data() { ... },
    async mounted() { ... },
    render(h) {
      return h(wrapped, {
        props: {
          result: this.result,
          loading: this.loading,
        },
      });
    },
  };
};
复制代码

到了这一步，已经是一个勉强可用的雏形了，我们来声明一下 木偶 组件。

const view = {
  template: `
    <span>
      <span>{{result?.name}}</span>
    </span>
  `,
  props: ["result", "loading"],
};
复制代码

注意这里的组件就可以是任意 .vue 文件了，我这里只是为了简化而采用这种写法。

然后用神奇的事情发生了，别眨眼，我们用 withPromise 包裹这个 view 组件。

// 假装这是一个 axios 请求函数
const request = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "ssh" });
    }, 1000);
  });
};

const hoc = withPromise(view, request)
复制代码

然后在父组件中渲染它：

<div id="app">
  <hoc />
</div>

<script>
 const hoc = withPromise(view, request)

 new Vue({
    el: 'app',
    components: {
      hoc
    }
 })
</script>
复制代码

此时，组件在空白了一秒后，渲染出了我的大名 ssh，整个异步数据流就跑通了。

现在在加上 加载中 和 加载失败 视图，让交互更友好点。

const withPromise = (wrapped, promiseFn) => {
  return {
    data() { ... },
    async mounted() { ... },
    render(h) {
      const args = {
        props: {
          result: this.result,
          loading: this.loading,
        },
      };

      const wrapper = h("div", [
        h(wrapped, args),
        this.loading ? h("span", ["加载中……"]) : null,
        this.error ? h("span", ["加载错误"]) : null,
      ]);

      return wrapper;
    },
  };
};

复制代码

到此为止的代码可以在 效果预览 里查看，控制台的 source 里也可以直接预览源代码。

完善

到此为止的高阶组件虽然可以演示，但是并不是完整的，它还缺少一些功能，比如

  1. 要拿到子组件上定义的参数，作为初始化发送请求的参数。
  2. 要监听子组件中请求参数的变化，并且重新发送请求。
  3. 外部组件传递给 hoc 组件的参数现在没有透传下去。

第一点很好理解，我们请求的场景的参数是很灵活的。

第二点也是实际场景中常见的一个需求。

第三点为了避免有的同学不理解，这里再啰嗦下，比如我们在最外层使用 hoc 组件的时候，可能希望传递一些 额外的props 或者 attrs 甚至是 插槽slot 给最内层的 木偶 组件。那么 hoc 组件作为桥梁，就要承担起将它透传下去的责任。

为了实现第一点，我们约定好 view 组件上需要挂载某个特定 key 的字段作为请求参数，比如这里我们约定它叫做 requestParams。

const view = {
  template: `
    <span>
      <span>{{result?.name}}</span>
    </span>
  `,
  data() {
    // 发送请求的时候要带上它
    requestParams: {
      name: 'ssh'
    }  
  },
  props: ["result", "loading"],
};
复制代码

改写下我们的 request 函数，让它为接受参数做好准备，

并且让它的 响应数据 原样返回 请求参数。

// 假装这是一个 axios 请求函数
const request = (params) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(params);
    }, 1000);
  });
};
复制代码

那么问题现在就在于我们如何在 hoc 组件中拿到 view 组件的值了，

平常我们怎么拿子组件实例的？ 没错就是 ref，这里也用它：

const withPromise = (wrapped, promiseFn) => {
  return {
    data() { ... },
    async mounted() {
      this.loading = true;
      // 从子组件实例里拿到数据
      const { requestParams } = this.$refs.wrapped
      // 传递给请求函数
      const result = await promiseFn(requestParams).finally(() => {
        this.loading = false;
      });
      this.result = result;
    },
    render(h) {
      const args = {
        props: {
          result: this.result,
          loading: this.loading,
        },
        // 这里传个 ref，就能拿到子组件实例了，和平常模板中的用法一样。
        ref: 'wrapped'
      };

      const wrapper = h("div", [
        this.loading ? h("span", ["加载中……"]) : null,
        this.error ? h("span", ["加载错误"]) : null,
        h(wrapped, args),
      ]);

      return wrapper;
    },
  };
};
复制代码

再来完成第二点，子组件的请求参数发生变化时，父组件也要响应式的重新发送请求，并且把新数据带给子组件。

const withPromise = (wrapped, promiseFn) => {
  return {
    data() { ... },
    methods: {
      // 请求抽象成方法
      async request() {
        this.loading = true;
        // 从子组件实例里拿到数据
        const { requestParams } = this.$refs.wrapped;
        // 传递给请求函数
        const result = await promiseFn(requestParams).finally(() => {
          this.loading = false;
        });
        this.result = result;
      },
    },
    async mounted() {
      // 立刻发送请求，并且监听参数变化重新请求
      this.$refs.wrapped.$watch("requestParams", this.request.bind(this), {
        immediate: true,
      });
    },
    render(h) { ... },
  };
};
复制代码

第二个问题，我们只要在渲染子组件的时候把 $attrs、$listeners、$scopedSlots 传递下去即可，

此处的 $attrs 就是外部模板上声明的属性，$listeners 就是外部模板上声明的监听函数，

以这个例子来说：

<my-input value="ssh" @change="onChange" />
复制代码

组件内部就能拿到这样的结构：

{
  $attrs: {
    value: 'ssh'
  },
  $listeners: {
    change: onChange
  }
}
复制代码

注意，传递 $attrs、$listeners 的需求不仅发生在高阶组件中，平常我们假如要对 el-input 这种组件封装一层变成 my-input 的话，如果要一个个声明 el-input 接受的 props，那得累死，直接透传 $attrs 、$listeners 即可，这样 el-input 内部还是可以照样处理传进去的所有参数。

// my-input 内部
<template>
  <el-input v-bind="$attrs" v-on="$listeners" />
</template>
复制代码

那么在 render 函数中，可以这样透传：

const withPromise = (wrapped, promiseFn) => {
  return {
    ...,
    render(h) {
      const args = {
        props: {
          // 混入 $attrs
          ...this.$attrs,
          result: this.result,
          loading: this.loading,
        },

        // 传递事件
        on: this.$listeners,

        // 传递 $scopedSlots
        scopedSlots: this.$scopedSlots,
        ref: "wrapped",
      };

      const wrapper = h("div", [
        this.loading ? h("span", ["加载中……"]) : null,
        this.error ? h("span", ["加载错误"]) : null,
        h(wrapped, args),
      ]);

      return wrapper;
    },
  };
};
复制代码

至此为止，完整的代码也就实现了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hoc-promise</title>
  </head>
  <body>
    <div id="app">
      <hoc msg="msg" @change="onChange">
        <template>
          <div>I am slot</div>
        </template>
        <template v-slot:named>
          <div>I am named slot</div>
        </template>
      </hoc>
    </div>
    <script src="./vue.js"></script>
    <script>
      var view = {
        props: ["result"],
        data() {
          return {
            requestParams: {
              name: "ssh",
            },
          };
        },
        methods: {
          reload() {
            this.requestParams = {
              name: "changed!!",
            };
          },
        },
        template: `
          <span>
            <span>{{result?.name}}</span>
            <slot></slot>
            <slot name="named"></slot>
            <button @click="reload">重新加载数据</button>
          </span>
        `,
      };

      const withPromise = (wrapped, promiseFn) => {
        return {
          data() {
            return {
              loading: false,
              error: false,
              result: null,
            };
          },
          methods: {
            async request() {
              this.loading = true;
              // 从子组件实例里拿到数据
              const { requestParams } = this.$refs.wrapped;
              // 传递给请求函数
              const result = await promiseFn(requestParams).finally(() => {
                this.loading = false;
              });
              this.result = result;
            },
          },
          async mounted() {
            // 立刻发送请求，并且监听参数变化重新请求
            this.$refs.wrapped.$watch(
              "requestParams",
              this.request.bind(this),
              {
                immediate: true,
              }
            );
          },
          render(h) {
            const args = {
              props: {
                // 混入 $attrs
                ...this.$attrs,
                result: this.result,
                loading: this.loading,
              },

              // 传递事件
              on: this.$listeners,

              // 传递 $scopedSlots
              scopedSlots: this.$scopedSlots,
              ref: "wrapped",
            };

            const wrapper = h("div", [
              this.loading ? h("span", ["加载中……"]) : null,
              this.error ? h("span", ["加载错误"]) : null,
              h(wrapped, args),
            ]);

            return wrapper;
          },
        };
      };

      const request = (data) => {
        return new Promise((r) => {
          setTimeout(() => {
            r(data);
          }, 1000);
        });
      };

      var hoc = withPromise(view, request);

      new Vue({
        el: "#app",
        components: {
          hoc,
        },
        methods: {
          onChange() {},
        },
      });
    </script>
  </body>
</html>
复制代码

可以在 这里 预览代码效果。

我们开发新的组件，只要拿 hoc 过来复用即可，它的业务价值就体现出来了，代码被精简到不敢想象。

import { getListData } from 'api'
import { withPromise } from 'hoc'

const listView = {
  props: ["result"],
  template: `
    <ul v-if="result>
      <li v-for="item in result">
        {{ item }}
      </li>
    </ul>
  `,
};

export default withPromise(listView, getListData)
复制代码

一切变得简洁而又优雅。

总结

本篇文章的所有代码都保存在 Github仓库 中，并且提供预览。

谨以此文献给在我源码学习道路上给了我很大帮助的 《Vue技术内幕》 作者 hcysun 大佬，虽然我还没和他说过话，但是在我还是一个工作几个月的小白的时候，一次业务需求的思考就让我找到了这篇文章：探索Vue高阶组件 | HcySunYang

当时的我还不能看懂这篇文章中涉及到的源码问题和修复方案，然后改用了另一种方式实现了业务，但是这篇文章里提到的东西一直在我的心头萦绕，我在忙碌的工作之余努力学习源码，期望有朝一日能彻底看懂这篇文章。

时至今日我终于能理解文章中说到的 $vnode 和 context 代表什么含义，但是这个 bug 在 Vue 2.6 版本由于 slot 的实现方式被重写，也顺带修复掉了，现在在 Vue 中使用最新的 slot 语法配合高阶函数，已经不会遇到这篇文章中提到的 bug 了。

………………………………

原文地址：访问原文地址
快照地址： 访问文章快照
总结与预览地址：访问总结与预览
推荐文章
健康中国  ·  假期传染病预防，注意事项看这里
2 天前
健康鄂尔多斯官方  ·  关于公众号进行账号迁移的说明
5 天前
健康鄂尔多斯官方  ·  健康科普 | 预防狂犬病，别被狗咬就够了吗
5 天前
餐企老板内参  ·  微利时代，餐企如何实现业绩利润双增长？即将开课！
2 周前
关于   移动版   ·   Py中国   ·   RSS之家   ·   CodingPro   ·   Code   ·   Link之家   ·   卧龙AI搜索   ·   小百科
今天看啥 - 微信公众号rss订阅, 微信rss, 稳定的RSS源
© 2024 ~ 沪ICP备11025650号