Vue Suspense完全指南
免责声明
渣翻译,仅供大家参考
在这篇综合指南中,我们会探讨Vue Suspense, Suspense可以让你情轻松愉快的使用异步组件, 用来在组件加载的时候显示备用内容
我们会探究Vue.js suspense的原理, 了解他的优点,并用真实例子学习如何使用他
所以, 如果你想要你的Vue.js应用更快速, 更友好,让我们进入Vue Suspense的世界, 看看他是如何处理你web项目的异步任务的
Vue Suspense
Vue Suspense可以让你通过管理异步组件和他们的加载状态来改善用户体验
Vue中的Suspense是什么
Vue Suspense是Vue.js2.6.0引入的一个重要功能, 可以让你通过管理异步组件和他们的加载状态来改善用户体验
异步组件就是在需要的时候进行动态加载, 例如路由懒加载, 或者通过API请求后加载的组件一样
在Vue Suspense以前, 当一个组件在加载中, 用户会看到空白屏或者不完整的视图, 导致了很差的用户体验
Vue Suspense丝滑的处理了加载状态从而解决了这个问题
在Vue Suspense中, 你可以用一个特殊的标签包裹异步组件,然后用插槽来声明组件加载中需要在备用显示区域显示的内容
当组件准备好后, Vue会自动替换完成加载的组件到备用显示区域,从而为用户提供了无缝切换
在Vue中你应该如何使用Suspense呢?
在Vue中使用suspense, 你需要使用Suspense组件和v-slot插槽指令,以下是详细步骤
第一步:声明一个异步组件
让我们创建了一个2秒后加载的异步组件, 假设我们有一个名为AsyncComponent的组件,然后进行动态引入
第二步:动态引入组件
现在, 在你的父组件中, 动态引入AsyncComponent, 下面是suspense的使用位置
第三步: Vue确保suspense正常运行
现在, 当你渲染了父组件, Vue会自动进行suspense, 他会在异步组件加载的时候显示"Loading..."
当异步组件加载完成, Vue就替换真正的组件内容到备用显示区域
这样就确保了你的用户不会在组件加载中卡在空白屏幕或加载进度条
用户反而会看到有帮助的内容, 或者其他你提供的内容, 从而为用户提供了非常好的体验
Vue Suspense例子
Vue Suspense例子:让我们深入一个真实例子, 来看看Vue Suspense如何显著的改善Web应用的用户体验
假设你在开发一个电商平台的产品分类
其中一个分类"电子设备"包含了很多的商品内容, 包括高清晰的图片和详细信息
如果不使用suspense, 当用户点击"Electronics"分类标签后, 页面会加载所有的商品和他们的关联信息
这可能会造成很长的加载时间,尤其是用户网络连接很慢, 或者用手机访问
在加载期间, 用户会看到一个白屏或者进度条, 导致不好的用户体验
然而, 通过Vue Suspense的优化, 你可以是购物平台更加优秀
让我们自己看看下面这个例子, 他把异步组件应用到了"电子产品"分类
现在, 在你的父组件内, 你可以使用Vue Suspense来异步加载"电子产品"分类
在这个例子中,当一个用户点击了"电子产品"分类,Electronics.vue组件在加载中时, Vue会先显示"Loading Electronics..."
当数据准备完成, Vue会替换真实的"电子产品"到备用内容,为户用提供了一个平滑的交互效果
通过把后台正在运行反馈给用户,让用户觉得加载时间没有那么长,避免了看到白屏的糟糕体验, 这种优化方式无疑提高了用户的体验
Vue Suspense组件
Vue Suspense组件: 现在让我们自己观察Vue Suspense组件, 看看他如何适配Vue.js应用的
Vue Suspense是Vue.js的内置组件了, 他能让你优雅的使用异步组件
他的主要作用是用来声明异步组件加载时备用视图并显示
这个备用视图可以确保组件在加载延迟时,给用户一个良好的体验
在之前的例子中, 你应该已经明白了如何使用Vue Suspense组件
他包裹了你要加载的异步组件, 并且提供了插槽, 你可以声明备用显示内容, 下面是详细说明:
导入Suspense:在使用Vue Suspense之前,确保你在js部分从Vue库中引入了他们
声明备用内容:在Suspense组件内, 使用v-slot指令声明备用内容,他会在异步组件加载时显示
加载异步组件: 在Suspense组件内放置你要加载的异步组件
在例子中, 我们使用AsyncComponent作为我们需要异步加载的组件
利用Vue Suspense,你可以在用户等待组件加载的时候, 通过显示反馈, 为他提供一个丝滑,优秀的用户体验
Vue Suspense router-view
Vue Suspense router-view:通过特殊的router-view组件, Vue Suspense在Vue Router中也可以有效的使用
router-view组件用来在当前的路由中匹配需要显示的组件
你的应用中,使用suspense和router-view可以让你在不同的页面路由中显示相同的异步加载备用视图效果
这可以有效的帮助那些加载时时间长, 并且渲染内容多的路由
让我们看看router-view中怎么使用Vue Suspense:
建立路由:在Vue路由配置中声明路由,每个路由都要有一个component属性指向相应的组件
在Router-View中使用Suspense:在你的App组件后者其他的父级组件中渲染router-view, 用Vue Suspense组件包裹他,并且提供好备用显示内容
在这个设置中,用户不管在何时导航到一个需要异步加载的路由中,Vue Suspense都会显示备用视图内容, 直到组件加载完成
当组件加载完成,Vue就会为这个路由切换真正的内容,给用户一个无缝的交互体验
router-view中使用Vue Suspense, 可以有效的优化你应用中加载时间的效果,尤其是某个特殊的页面要加载很重的内容, 或者需要从外部获取数据源
这样可以让用户一直直到发生的情况, 从而导致两行的浏览体验
Vue Suspense Error
Vue Suspense Error: 虽然Vue Suspense是一个很强大的,用来优雅使用异步组件的工具, 但是有些时候, 由于计划外的原因, 或者在加载过程中出现了错误, 那就会出现一些额外状况
异步组件在加载中出现错误, Vue Suspense还可以让你在备用显示区域显示error组件, 这无疑是很好的用户体验
让我们举个例子, 让异步组件在加载的时候故意制造一个错误
在这个例子上, 我们故意制造了一个错误, 然后在异步组件的created声明周期钩子中, 调用reject函数
这时, 在使用Vue Suspense的父组件中,我们可以优雅的处理错误状态
在这个更新后的例子中,我们在Suspense组件中增加了一个新的error插槽
这个插槽用来声明备用显示内容, 从而在异步组件加载时遇到错误时进行显示
现在, 如果在加载组件的时候出现一个错误, Vue Suspense会从默认备用显示内容"Loading or Error..."切换到详细的错误显示内容"An error occurred while loading the component."
用Vue Suspense处理错误信息对于用户交互的友好性是至关重要的
他可以让你给用户传递错误的信息和内容, 从而让用户对应用的情况了解
Vue Suspense过渡
Vue Suspense 过渡: Vue Suspense 不仅可以平滑异步组件的加载, 还可以无缝的使用于Vue的 过渡功能中
这意味着你可以在组件加载期间, 为备用显示内容增加一个过渡效果, 从而提高用户的交互体验
假设你有一个简单的异步组件名为AsyncComponent, 并且你想在加载的时候增加一个过渡效果
你可以使用Vue的 组件配合Vue Suspense, 在组件加载完成, 从默认备用显示内容切换到真实的内容时, 出现一个过渡特效
在这个例子中, 我们增加了一个名为"fade"的组件, 并且用他包裹备用显示内容"Loading..."
fade-enter-active 和 fade-leave-active 这两个类名声明了CSS opacity 属性的移动时候的值,fade-enter 和 fade-leave-to则声明了opacity属性开始 和结束时候的值
希望现在你可以很好的了解怎么在Vue.js中使用Vue Suspense了
了解如何使用Vue Suspense来管理异步组件和他们的加载状态, 从而为用户提供优秀的交互体验