Vue2 尝鲜

前几天看了一篇讲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 的使用方法。 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标签内： 一个懒加载组件的基本结构就实现了。 Loading 我们回看一下 Vue2 原生实现，它还有一个叫LoadingComponent的默认组件，主要功能就是显示懒加载开始到组件渲染完毕期间的过渡效果。也有相同的功能，它是通过一个叫fallback的插槽注入了这个 Loading 组件：组件在完成渲染前会显示fallback插槽内容，直到异步组件以及相关异步调用结束为止。 我们看一下效果： Loading 资源管理器 上面提到过，Vue2 原始的懒加载有个天然的弱项：并不能监测异步组件内的异步操作，如 api 调用。怎么做的呢？ 它提供了一个叫 createResource 工厂方法创建资源管理器——this.$rm。如下代码中，资源管理器的作用就是异步读取数据——this.$rm.read(params)；组件就会知道该组件正在异步调用api，并且会在调用结束后隐藏Loading；最后将异步调用的结果——$rm.$result——响应式地渲染到组件里。 // async-component.vue 异步组件的其他异步响应——如进一步加载异步子组件以及相关 api 调用——也会被捕获，直至所有异步操作结束才隐藏Loading。 Error 异步加载也可能出错，又为此增加了一个error插槽： 使用方法也很简单，倘若异步加载失败，fallback插槽会自动切换到error插槽，效果如下： Error 当然，你也可以设置 delay 时间，或是干脆自定义错误处理——将异步渲染过程中的后续错误收集到handleError中。 其他 除此之外，vue-async-manager 还与 vue-router、vuex、throttle、cache 等等工具有一定集成，有兴趣的小伙伴可以去查看开发者文档。 小结 这期介绍了一款 Vue2 的小众插件——vue-async-manager。它使得 Vue2 可以模拟类似于 React Suspense 的操作，增强了懒加载组件的功能。但是，我自己觉得这个小众Suspense还是比不过 react 的实现（又拍脑袋胡言乱语了）：它并没有很彻底地将取数据方法和组件逻辑解耦掉。听说 Vue3 会原生支持，查了一下并没有很详细的文档，很期待 Vue3 能给我们带来一套最优雅的解决方案。 最后，我还是得交代一下，Vue2 中的插件只适合尝鲜，并不推荐在生产环境里使用——vue-async-manager自己都标注为 deprecated 了?。我只是对这个设计理念感兴趣，如果真正去使用，还是等到 Vue3 原生支持了再说吧。 相关 文章同步发布于an-Onion 的 Github。码字不易，欢迎点赞。

本文章由javascript技术分享原创和收集