Vue2 <Suspense> 尝鲜

前几天看了一篇讲react suspense的文章，挺有趣的；所以翻了一下 vue 相关的实现，结果 Vue2 并不支持。所幸有人做了一个 plugin，虽然有点小众，但是如果有朋友想尝鲜的话，可以去这里学习一下——vue-async-manager。

Overview

大型多页面项目中，我们常常使用组件懒加载来加快首屏渲染。Vue2 原生提供了一种半吊子的懒加载形式，如下所示：当页面渲染my-component时才动态加载async-component组件。loadingComponent会在异步组件加载过程中占据my-component的位置，并最终被渲染后的async-component取缔。但是，这个真心不好用！核心问题就是：异步组件里若还有进一步的异步操作（如 api 请求、异步子组件），这个loadingComponent就不起效果了。我曾经为了在 api 请求阶段显示 loading 画面，不得已在 JS 里操作 DOM，画面一度非常难看。

import LoadingComponent from './LoadingComponent'

new Vue({
  components: {
    'my-component': () => ({
        component: import('./async-component'),
        loading: LoadingComponent,
        delay: 200
    })
  }
})

回过头来看vue-async-manager。它提供了一个叫<Suspense>的标签来解决上述困境。下面我会一步步介绍 Suspense 的使用方法。

Get-started

一切从安装依赖开始：

yarn add vue-async-manager
// or
npm i vue-async-manager

然后就在 main.js 里让 Vue 使用该插件即可：

// main.js
import Vue from "vue"
import VueAsyncManager from "vue-async-manager"

Vue.use(VueAsyncManager)

懒加载

vuejs 通常使用 import 导入组件：

import asyncComponent from './async-component.vue';

vue-async-manager 为了实现懒加载，提供了一个 lazy 方法来创建异步组件：

import { lazy } from 'vue-async-manager'

const asyncComponent = lazy(() => import('./async-component.vue'))

异步组件创建后，使用方式与普通组件无异，只不过这个组件必须被包裹在Suspense标签内：

<template>
  <Suspense>
    <asyncComponent/>
  </Suspense>
</template>

<script>
const asyncComponent = lazy(() => import('./async-component.vue'))

export default {
  name: 'App',
  components: {
    asyncComponent,
  }
}
</script>

一个懒加载组件的基本结构就实现了。

Loading

我们回看一下 Vue2 原生实现，它还有一个叫LoadingComponent的默认组件，主要功能就是显示懒加载开始到组件渲染完毕期间的过渡效果。<Suspense>也有相同的功能，它是通过一个叫fallback的插槽注入了这个 Loading 组件：<Suspense>组件在完成渲染前会显示fallback插槽内容，直到异步组件以及相关异步调用结束为止。

<template>
  <Suspense>
    <div slot="fallback">Loading</div>
    <asyncComponent/>
  </Suspense>
</template>

我们看一下效果：

资源管理器

上面提到过，Vue2 原始的懒加载有个天然的弱项：并不能监测异步组件内的异步操作，如 api 调用。<Suspense>怎么做的呢？

它提供了一个叫 createResource 工厂方法创建资源管理器——this.$rm。如下代码中，资源管理器的作用就是异步读取数据——this.$rm.read(params)；<Suspense>组件就会知道该组件正在异步调用api，并且会在调用结束后隐藏Loading；最后将异步调用的结果——$rm.$result——响应式地渲染到组件里。

// async-component.vue
<template>
  <div>{{ $rm.$result }}</div>
</template>

<script>
import { getAsyncData } from 'api'
import { createResource } from 'vue-async-manager'

export default {
  created() {
    this.$rm = createResource((params) => getAsyncData(params))
    this.$rm.read(params)
  }
}
</script>

异步组件的其他异步响应——如进一步加载异步子组件以及相关 api 调用——也会被<Suspense>捕获，直至所有异步操作结束才隐藏Loading。

Error

异步加载也可能出错，<Suspense>又为此增加了一个error插槽：

<template>
  <Suspense>
    <div slot="fallback">Loading</div>
    <div slot="error">Error</div>
    <asyncComponent/>
  </Suspense>
</template>

使用方法也很简单，倘若异步加载失败，fallback插槽会自动切换到error插槽，效果如下：

Error

当然，你也可以设置 delay 时间，或是干脆自定义错误处理——将异步渲染过程中的后续错误收集到handleError中。

<template>
  <Suspense :delay="200" @rejected="handleError">
    <div slot="fallback">loading</div>
    <asyncComponent/>
  </Suspense>
</template>
<script>
export default {
  methods: {
    handleError() {
      // Custom behavior
    }
  }
};
</script>

其他

除此之外，vue-async-manager 还与 vue-router、vuex、throttle、cache 等等工具有一定集成，有兴趣的小伙伴可以去查看开发者文档。

小结

这期介绍了一款 Vue2
的小众插件——vue-async-manager。它使得 Vue2 可以模拟类似于 React Suspense 的操作，增强了懒加载组件的功能。但是，我自己觉得这个小众Suspense还是比不过 react 的实现（又拍脑袋胡言乱语了）：它并没有很彻底地将取数据方法和组件逻辑解耦掉。听说 Vue3 会原生支持<Suspense>，查了一下并没有很详细的文档，很期待 Vue3 能给我们带来一套最优雅的解决方案。

最后，我还是得交代一下，Vue2 中的<Suspense>插件只适合尝鲜，并不推荐在生产环境里使用——vue-async-manager自己都标注为 deprecated 了😅。我只是对<Suspense>这个设计理念感兴趣，如果真正去使用，还是等到 Vue3 原生支持了再说吧。