Vue Suspense All In One

Vue Suspense All In One

<Suspense> is a built-in component for orchestrating async dependencies in a component tree.
It can render a loading state while waiting for multiple nested async dependencies down the component tree to be resolved.

<Suspense> 是一个内置组件，用于在组件树中编排异步依赖项。
它可以在等待解决组件树下的多个嵌套异步依赖项时呈现加载状态。

demos

// async setup() 
export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}

<script setup>
//  top-level await
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

<script setup>
// dynamic import component
const App = () => import('./App');

// async await



</script>

<Suspense>
  <!-- component with nested async dependencies -->
  <Dashboard />
 <!-- <Dashboard #default/> -->

  <!-- loading state via #fallback slot -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

usage

1. loading

2. fallback

3. skeleton

API

https://vuejs.org/guide/built-ins/suspense.html

https://v3.cn.vuejs.org/guide/migration/suspense.html

timeout prop

errorCaptured option / onErrorCaptured() hook

https://vuejs.org/api/options-lifecycle.html#errorcaptured

https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured

nest order

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- main content -->
          <component :is="Component"></component>

          <!-- loading state -->
          <template #fallback>
            Loading...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

lazily loading components

https://vuejs.org/guide/components/async.html#loading-and-error-states

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),

  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

import { defineAsyncComponent } from 'vue'

export default {
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
}

https://vuejs.org/api/reactivity-advanced.html#customref

https://router.vuejs.org/guide/advanced/lazy-loading.html

// import UserDetails from './views/UserDetails'
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

VueConf 2022

https://us.vuejs.org/

refs

https://learnvue.co/2020/01/an-introduction-to-vuejs-suspense-components/

https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---