vue3 解决各场景 loading过度 ，避免白屏尴尬！_vue3 loading

* 当vue实例创建完成，通过`.mount()` 方法挂载到 `id='app'` 的div 里，会替换掉里的`loading`内容；




---


##### 2、 路由切换时、异步组件 loading


* 路由切换过度 需要先了解一个，`vue3` 的内置组件 `<Suspense>`；
* `<Suspense>` 提供 `2` 个插槽 👇；
* `#default` : 一个要加载的内容 ；
* `#fallback`: 一个加载种显示的内容；

---


**同理：( 异步组件的切换 )** 

const vitblie = ref(false);
function open(){
vitblie.value = !vitblie.value;
}

* 异步组件也是可以使用相同的方法




---


#### Ⅲ、 添加过度动画


添加过度动画需要先了解 `vue3` 内置组件 `<Component>` 和 `<Transition>` 👇


* `<Component>`: 非常简单只有一个 `is` 显示该组件， 可以用来组件切换 如：

* `<Transition>` : 里插入的内容 ***显示/隐藏*** 添加过度动画 ，通过 `name` 属性来拼接 `class` 如 :

* 设置样式通过 `name` 属性 这里



> 
> `anime-enter-active`: 过度态 ( 设置 **隐藏 => 显示** 过度的时间等参数)  
>  `anime-leave-active`: 过度态 ( 设置 **显示 => 隐藏** 过度的时间等参数)  
>    
>   
>  `anime-enter-from` => `anime-enter-to` **隐藏 => 显示** 开始和结束的样式  
>  `anime-leave-from` => `anime-leave-to` **显示 => 隐藏** 开始和结束的样式
> 
> 
> 


组合起来 👇

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-2Anjfa1F-1719228453449)]