docs: translate /guide/built-ins/suspense

src/guide/built-ins/suspense.md

@@ -4,39 +4,39 @@ outline: deep
 
 # Suspense {#suspense}
 
-:::warning 实验性功能
-`<Suspense>` 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。
+:::warning 實驗性功能
+`<Suspense>` 是一項實驗性功能。它不一定會最終成為穩定功能，並且在穩定之前相關 API 也可能會發生變化。
 :::
 
-`<Suspense>` 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
+`<Suspense>` 是一個內置組件，用來在組件樹中協調對異步依賴的處理。它讓我們可以在組件樹上層等待下層的多個嵌套異步依賴項解析完成，並可以在等待時渲染一個加載狀態。
 
-## 异步依赖 {#async-dependencies}
+## 異步依賴 {#async-dependencies}
 
-要了解 `<Suspense>` 所解决的问题和它是如何与异步依赖进行交互的，我们需要想象这样一种组件层级结构：
+要了解 `<Suspense>` 所解決的問題和它是如何與異步依賴進行交互的，我們需要想象這樣一種組件層級結構：
 
 ```
 <Suspense>
 └─ <Dashboard>
  ├─ <Profile>
- │ └─ <FriendStatus>（组件有异步的 setup()）
+ │ └─ <FriendStatus>（組件有異步的 setup()）
  └─ <Content>
- ├─ <ActivityFeed> （异步组件）
- └─ <Stats>（异步组件）
+ ├─ <ActivityFeed> （異步組件）
+ └─ <Stats>（異步組件）
 ```
 
-在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。如果没有 `<Suspense>`，则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。
+在這個組件樹中有多個嵌套組件，要渲染出它們，首先得解析一些異步資源。如果沒有 `<Suspense>`，則它們每個都需要處理自己的加載、報錯和完成狀態。在最壞的情況下，我們可能會在頁面上看到三個旋轉的加載態，在不同的時間顯示出內容。
 
-有了 `<Suspense>` 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。
+有了 `<Suspense>` 組件後，我們就可以在等待整個多層級組件樹中的各個異步依賴獲取結果時，在頂層展示出加載中或加載失敗的狀態。
 
-`<Suspense>` 可以等待的异步依赖有两种：
+`<Suspense>` 可以等待的異步依賴有兩種：
 
-1. 带有异步 `setup()` 钩子的组件。这也包含了使用 `<script setup>` 时有顶层 `await` 表达式的组件。
+1. 帶有異步 `setup()` 鉤子的組件。這也包含了使用 `<script setup>` 時有頂層 `await` 表達式的組件。
 
-2. [异步组件](/guide/components/async)。
+2. [異步組件](/guide/components/async)。
 
 ### `async setup()` {#async-setup}
 
-组合式 API 中组件的 `setup()` 钩子可以是异步的：
+組合式 API 中組件的 `setup()` 鉤子可以是異步的：
 
 ```js
 export default {
@@ -50,7 +50,7 @@ export default {
 }
 ```
 
-如果使用 `<script setup>`，那么顶层 `await` 表达式会自动让该组件成为一个异步依赖：
+如果使用 `<script setup>`，那麼頂層 `await` 表達式會自動讓該組件成為一個異步依賴：
 
 ```vue
 <script setup>
@@ -63,66 +63,66 @@ const posts = await res.json()
 </template>
 ```
 
-### 异步组件 {#async-components}
+### 異步組件 {#async-components}
 
-异步组件默认就是<strong>“suspensible”</strong>的。这意味着如果组件关系链上有一个 `<Suspense>`，那么这个异步组件就会被当作这个 `<Suspense>` 的一个异步依赖。在这种情况下，加载状态是由 `<Suspense>` 控制，而该组件自己的加载、报错、延时和超时等选项都将被忽略。
+異步組件默認就是<strong>“suspensible”</strong>的。這意味著如果組件關係鏈上有一個 `<Suspense>`，那麼這個異步組件就會被當作這個 `<Suspense>` 的一個異步依賴。在這種情況下，加載狀態是由 `<Suspense>` 控制，而該組件自己的加載、報錯、延時和超時等選項都將被忽略。
 
-异步组件也可以通过在选项中指定 `suspensible: false` 表明不用 `Suspense` 控制，并让组件始终自己控制其加载状态。
+異步組件也可以通過在選項中指定 `suspensible: false` 表明不用 `Suspense` 控制，並讓組件始終自己控制其加載狀態。
 
-## 加载中状态 {#loading-state}
+## 加載中狀態 {#loading-state}
 
-`<Suspense>` 组件有两个插槽：`#default` 和 `#fallback`。两个插槽都只允许**一个**直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。
+`<Suspense>` 組件有兩個插槽：`#default` 和 `#fallback`。兩個插槽都只允許**一個**直接子節點。在可能的時候都將顯示默認槽中的節點。否則將顯示後備槽中的節點。
 
 ```vue-html
 <Suspense>
- <!-- 具有深层异步依赖的组件 -->
+ <!-- 具有深層異步依賴的組件 -->
  <Dashboard />
 
- <!-- 在 #fallback 插槽中显示 “正在加载中” -->
+ <!-- 在 #fallback 插槽中顯示 “正在加載中” -->
  <template #fallback>
  Loading...
  </template>
 </Suspense>
 ```
 
-在初始渲染时，`<Suspense>` 将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖，则会进入**挂起**状态。在挂起状态期间，展示的是后备内容。当所有遇到的异步依赖都完成后，`<Suspense>` 会进入**完成**状态，并将展示出默认插槽的内容。
+在初始渲染時，`<Suspense>` 將在內存中渲染其默認的插槽內容。如果在這個過程中遇到任何異步依賴，則會進入**掛起**狀態。在掛起狀態期間，展示的是後備內容。當所有遇到的異步依賴都完成後，`<Suspense>` 會進入**完成**狀態，並將展示出默認插槽的內容。
 
-如果在初次渲染时没有遇到异步依赖，`<Suspense>` 会直接进入完成状态。
+如果在初次渲染時沒有遇到異步依賴，`<Suspense>` 會直接進入完成狀態。
 
-进入完成状态后，只有当默认插槽的根节点被替换时，`<Suspense>` 才会回到挂起状态。组件树中新的更深层次的异步依赖**不会**造成 `<Suspense>` 回退到挂起状态。
+進入完成狀態後，只有當默認插槽的根節點被替換時，`<Suspense>` 才會回到掛起狀態。組件樹中新的更深層次的異步依賴**不會**造成 `<Suspense>` 回退到掛起狀態。
 
-发生回退时，后备内容不会立即展示出来。相反，`<Suspense>` 在等待新内容和异步依赖完成时，会展示之前 `#default` 插槽的内容。这个行为可以通过一个 `timeout` prop 进行配置：在等待渲染新内容耗时超过 `timeout` 之后，`<Suspense>` 将会切换为展示后备内容。若 `timeout` 值为 `0` 将导致在替换默认内容时立即显示后备内容。
+發生回退時，後備內容不會立即展示出來。相反，`<Suspense>` 在等待新內容和異步依賴完成時，會展示之前 `#default` 插槽的內容。這個行為可以通過一個 `timeout` prop 進行配置：在等待渲染新內容耗時超過 `timeout` 之後，`<Suspense>` 將會切換為展示後備內容。若 `timeout` 值為 `0` 將導致在替換默認內容時立即顯示後備內容。
 
 ## 事件 {#events}
 
-`<Suspense>` 组件会触发三个事件：`pending`、`resolve` 和 `fallback`。`pending` 事件是在进入挂起状态时触发。`resolve` 事件是在 `default` 插槽完成获取新内容时触发。`fallback` 事件则是在 `fallback` 插槽的内容显示时触发。
+`<Suspense>` 組件會觸發三個事件：`pending`、`resolve` 和 `fallback`。`pending` 事件是在進入掛起狀態時觸發。`resolve` 事件是在 `default` 插槽完成獲取新內容時觸發。`fallback` 事件則是在 `fallback` 插槽的內容顯示時觸發。
 
-例如，可以使用这些事件在加载新组件时在之前的 DOM 最上层显示一个加载指示器。
+例如，可以使用這些事件在加載新組件時在之前的 DOM 最上層顯示一個加載指示器。
 
-## 错误处理 {#error-handling}
+## 錯誤處理 {#error-handling}
 
-`<Suspense>` 组件自身目前还不提供错误处理，不过你可以使用 [`errorCaptured`](/api/options-lifecycle#errorcaptured) 选项或者 [`onErrorCaptured()`](/api/composition-api-lifecycle#onerrorcaptured) 钩子，在使用到 `<Suspense>` 的父组件中捕获和处理异步错误。
+`<Suspense>` 組件自身目前還不提供錯誤處理，不過你可以使用 [`errorCaptured`](/api/options-lifecycle#errorcaptured) 選項或者 [`onErrorCaptured()`](/api/composition-api-lifecycle#onerrorcaptured) 鉤子，在使用到 `<Suspense>` 的父組件中捕獲和處理異步錯誤。
 
-## 和其他组件结合 {#combining-with-other-components}
+## 和其他組件結合 {#combining-with-other-components}
 
-我们常常会将 `<Suspense>` 和 [`<Transition>`](./transition)、[`<KeepAlive>`](./keep-alive) 等组件结合。要保证这些组件都能正常工作，嵌套的顺序非常重要。
+我們常常會將 `<Suspense>` 和 [`<Transition>`](./transition)、[`<KeepAlive>`](./keep-alive) 等組件結合。要保證這些組件都能正常工作，嵌套的順序非常重要。
 
-另外，这些组件都通常与 [Vue Router](https://router.vuejs.org/zh/) 中的 `<RouterView>` 组件结合使用。
+另外，這些組件都通常與 [Vue Router](https://router.vuejs.org/zh/) 中的 `<RouterView>` 組件結合使用。
 
-下面的示例展示了如何嵌套这些组件，使它们都能按照预期的方式运行。若想组合得更简单，你也可以删除一些你不需要的组件：
+下面的示例展示了如何嵌套這些組件，使它們都能按照預期的方式運行。若想組合得更簡單，你也可以刪除一些你不需要的組件：
 
 ```vue-html
 <RouterView v-slot="{ Component }">
  <template v-if="Component">
  <Transition mode="out-in">
  <KeepAlive>
  <Suspense>
- <!-- 主要内容 -->
+ <!-- 主要內容 -->
  <component :is="Component"></component>
 
- <!-- 加载中状态 -->
+ <!-- 加載中狀態 -->
  <template #fallback>
- 正在加载...
+ 正在加載...
  </template>
  </Suspense>
  </KeepAlive>
@@ -131,10 +131,10 @@ const posts = await res.json()
 </RouterView>
 ```
 
-Vue Router 使用动态导入对[懒加载组件](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)进行了内置支持。这些与异步组件不同，目前他们不会触发 `<Suspense>`。但是，它们仍然可以有异步组件作为后代，这些组件可以照常触发 `<Suspense>`。
+Vue Router 使用動態導入對[懶加載組件](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)進行了內置支持。這些與異步組件不同，目前他們不會觸發 `<Suspense>`。但是，它們仍然可以有異步組件作為後代，這些組件可以照常觸發 `<Suspense>`。
 
 ---
 
-**参考**
+**參考**
 
-- [`<Suspense>` API 参考](/api/built-in-components#suspense)
+- [`<Suspense>` API 參考](/api/built-in-components#suspense)