vue.js - Vue 3 中的可挂起组件是什么？

Question

我正在阅读这篇文章:https://v3.vuejs.org/guide/component-dynamic-async.html#using-with-suspense

它指的是一个叫做“suspensible”组件的概念。

我已经研究过，但找不到任何关于什么是所谓的“可疑”组件的信息。

谁能解释一下这是什么？谢谢!

Answer 1

“悬而未决” 表示在父级 <Suspense> 时可由回退内容替换解决 async在其 <template #default> 中找到子组件.

这个概念是从 React 的 Suspense API 借来的.

---

更详细地说，<Suspense>是一个内置的 Vue 3 组件，它呈现一个 <template #fallback>而不是 <template #default> , 直到所有 async默认模板中的子组件已解析。

为了成为可暂停，组件的呈现需要依赖于一个 promise :

• 使用() => import('some/path')加载
• 或使用async/await (或任何其他形式的 Promise 语法)在其 setup 中功能

当包含在 <Suspense> 中时，可暂停组件将被暂停的默认模板，而其父级 <Suspense>尚未解决其所有暂停组件，即使暂停组件本身已经解决。

显然，<Suspense>组件本身是悬浮的，悬浮可以嵌套。

---

这是一个 more detailed explanation在 <Suspense>在 Vue 3 中。

---

在其他用途​​中，<Suspence>提供了一种优雅而直观的方法来解决必须在 v-if 中包装子组件和模板的常见问题防止尚未加载的数据上存在不存在的属性。

一个典型的 Vue 2 示例:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('render-items', {
  props: ['items'],
  template: `<table>
  <tr>
    <th>Id</th>
    <th>User Id</th>
    <th>Title</th>
  </tr>
  <tr v-for="(item, key) in items" :key="key">
    <td v-text="item.id"></td>
    <td v-text="item.userId"></td>
    <td v-text="item.title"></td>
  </tr>
</table>`  
});

new Vue({
  el: '#app',
  data: () => ({
    items: []
  }),
  computed: {
    hasData() {
      return this.items.length;
    }
  },  
  async created() {
    const items = await fetch('https://jsonplaceholder.typicode.com/posts')
      .then(r => r.json());
    this.items = items;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <render-items :items="items" v-if="hasData"></render-items>
  <template v-else>loading...</template>
</div>

Vue 3 中的相同示例(或多或少)，使用 <Suspense>和 async setup :

const RenderItems = Vue.defineComponent({
  async setup() {
    const items = await fetch('https://jsonplaceholder.typicode.com/posts')
      .then(r => r.json());
    return Vue.reactive({ items });
  },
  template: `<table>
  <tr>
    <th>Id</th>
    <th>User Id</th>
    <th>Title</th>
  </tr>
  <tr v-for="(item, key) in items" :key="key">
    <td v-text="item.id"></td>
    <td v-text="item.userId"></td>
    <td v-text="item.title"></td>
  </tr>
</table>`
});
const App = { components: { RenderItems }};
Vue.createApp(App).mount('#app');

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <Suspense>
    <template #default>
      <render-items></render-items>
    </template>
    <template #fallback>
      loading...
    </template>
  </Suspense>
</div>

一个主要优势是在 Vue 3 示例中，我们可以在子组件中包含数据 getter (和数据)。这在 Vue 2 中是不可能的，因为:

• 子组件仅在数据加载后创建
• 父级需要知道条件何时发生变化(因此它需要访问实际条件)以便在呈现回退内容或子组件之间切换。

在 Vue 2 中最简单的方法实际上是在父组件中加载数据并将结果通过 props 传递给子组件。如果您有很多子组件，这种模式可能会变得困惑。

在 Vue 3 中，加载数据和检查条件的责任完全由子组件承担。家长不需要了解实际情况。

就像<template> , <Suspense>不创建 DOM 元素。

在上面的 Vue 3 示例中，<RenderItems />是悬而未决的。