Skip to content

Commit

Permalink
style: remove line breaks in sentences (#2802)
Browse files Browse the repository at this point in the history
  • Loading branch information
jay-es committed Apr 25, 2024
1 parent 4e4a963 commit 31a6e6b
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 10 deletions.
3 changes: 1 addition & 2 deletions src/api/built-in-components.md
Expand Up @@ -334,7 +334,6 @@ Used for orchestrating nested async dependencies in a component tree.

If it encounters async dependencies ([Async Components](/guide/components/async) and components with [`async setup()`](/guide/built-ins/suspense#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.

By setting the Suspense as `suspensible`, all the async dependency handling
will be handled by the parent Suspense. See [implementation details](https://github.com/vuejs/core/pull/6736)
By setting the Suspense as `suspensible`, all the async dependency handling will be handled by the parent Suspense. See [implementation details](https://github.com/vuejs/core/pull/6736)

- **See also** [Guide - Suspense](/guide/built-ins/suspense)
10 changes: 2 additions & 8 deletions src/guide/built-ins/suspense.md
Expand Up @@ -145,9 +145,7 @@ When we have multiple async components (common for nested or layout-based routes
</Suspense>
```

`<Suspense>` creates a boundary that will resolve all the async components down the tree,
as expected. However, when we change `DynamicAsyncOuter`, `<Suspense>` awaits it correctly, but when we change `DynamicAsyncInner`,
the nested `DynamicAsyncInner` renders an empty node until it has been resolved (instead of the previous one or fallback slot).
`<Suspense>` creates a boundary that will resolve all the async components down the tree, as expected. However, when we change `DynamicAsyncOuter`, `<Suspense>` awaits it correctly, but when we change `DynamicAsyncInner`, the nested `DynamicAsyncInner` renders an empty node until it has been resolved (instead of the previous one or fallback slot).

In order to solve that, we could have a nested suspense to handle the patch for the nested component, like:

Expand All @@ -161,11 +159,7 @@ In order to solve that, we could have a nested suspense to handle the patch for
</Suspense>
```

If you don't set the `suspensible` prop, the inner `<Suspense>` will be treated like a sync component by the parent `<Suspense>`.
That means that it has its own fallback slot and if both `Dynamic` components change at the same time,
there might be empty nodes and multiple patching cycles while the child `<Suspense>` is loading its own dependency tree,
which might not be desirable. When it's set, all the async dependency handling is given to the parent `<Suspense>` (including the events emitted)
and the inner `<Suspense>` serves solely as another boundary for the dependency resolution and patching.
If you don't set the `suspensible` prop, the inner `<Suspense>` will be treated like a sync component by the parent `<Suspense>`. That means that it has its own fallback slot and if both `Dynamic` components change at the same time, there might be empty nodes and multiple patching cycles while the child `<Suspense>` is loading its own dependency tree, which might not be desirable. When it's set, all the async dependency handling is given to the parent `<Suspense>` (including the events emitted) and the inner `<Suspense>` serves solely as another boundary for the dependency resolution and patching.

---

Expand Down

0 comments on commit 31a6e6b

Please sign in to comment.