vue3 解决各场景 loading过度 ，避免白屏尴尬！，Vue3优化加载过程，解决场景中的过度Loading，避免白屏问题！

Vue 3能有效解决各场景中的loading过度问题，避免白屏尴尬。通过优化加载状态和过渡效果，Vue 3提升了用户体验，确保页面在数据加载时流畅转换，避免因加载导致的空白或卡顿。这一特性使得Vue 3在构建现代前端应用时更加出色，为用户带来更加顺畅的浏览体验。

Ⅰ、前言

当我们每次访问页面，切换路由，或者加载异步组件时，都会有一个等待的时间，为了提高用户体验，我们通常会在这些等待期间添加一个加载过度动画，这些场景我们应该把loading放在哪里呢？

Ⅱ、Vue3 中的常见过度

针对以下三种情况，我们进行了整理：

1、首次打开页面时的 loading

在页面首次打开的加载内容可以通过在根目录的index.html文件里添加内容来实现，当Vue实例创建完成并挂载到id='app'的div里时，会替换掉其中的loading内容。

2、路由切换时的 loading

路由切换过度需要使用vue3的内置组件，这个组件提供了两个插槽：#default，用于加载的内容；#fallback，用于在加载时显示的内容，同理，异步组件的切换也可以使用相同的方法。

3、异步组件显示时的 loading

对于异步组件，我们也可以使用相同的过度动画方法，通过vue3的内置组件来显示或隐藏内容，并添加过度动画。

Ⅲ、添加过度动画

要添加过度动画，需要了解vue3的内置组件 ，以及 ，这些组件可以用来实现组件的切换和显示/隐藏，并通过name属性来添加过度动画。

设置样式时，可以使用anime-enter-active、anime-leave-active等类名来定义过度效果，通过anime-enter-from和anime-enter-to、anime-leave-from和anime-leave-to等属性来定义开始和结束的样式。

相关推荐文章：

1、Vue3性能优化总汇

2、Vue2.7过度指南

3、升级vue3问题总汇

4、Vue3配置JSX语法