注意:目前(2022-08-01)Suspense显示的是一个实验性的特性,API随时可能会修改
Suspense是一个内置的全局组件,该组件有两个插:
- default:如果default可以显示,那么显示default的内容;
- fallback:如果default无法显示,那么会显示falback插槽的内容:
代码示例
// asyncHome.vue
<template>
<div class="home">
<h2>home</h2>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
</style>
fallback是应急的意思,所以在没有加载完成的时候会显示这个页面
// App.vue
<template>
<div class="app">
<suspense>
<template #default>
<async-home></async-home>
</template>
<template #fallback>
<h2>Loading</h2>
</template>
</suspense>
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))
</script>
<style scoped>
</style>感谢大家观看,我们下次见
文章不错支持一下,非常喜欢
文章不错非常喜欢,支持一下
马克吐温的作品就很经典,小时候很爱看
文章不错支持一下,非常喜欢
文章不错非常喜欢,支持
文章不错非常喜欢,支持
[...]回顾如何定义作用域链如何定义'作用域'?说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念,它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构,即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中,每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]
哈喽,你的SSL好像过期喽
@秋风于渭水 确实
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中,大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境,然后在不同的工具中起作用,比如autoprefixer/babel/postess preset env等,在进行了正确的配置后,开发的Vue或者React项目在进行打包时[...]