diff --git a/src/guide/components/async.md b/src/guide/components/async.md index 18ae612e..87677068 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -1,24 +1,24 @@ -# 异步组件 {#async-components} +# 異步組件 {#async-components} ## 基本用法 {#basic-usage} -在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了 [`defineAsyncComponent`](/api/general#defineasynccomponent) 方法来实现此功能: +在大型項目中,我們可能需要拆分應用為更小的模塊,並僅在需要時再從服務器加載相關組件。Vue 提供了 [`defineAsyncComponent`](/api/general#defineasynccomponent) 方法來實現此功能: ```js import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { - // ...从服务器获取组件 - resolve(/* 获取到的组件 */) + // ...從服務器獲取組件 + resolve(/* 獲取到的組件 */) }) }) -// ... 像使用其他一般组件一样使用 `AsyncComp` +// ... 像使用其他一般組件一樣使用 `AsyncComp` ``` -如你所见,`defineAsyncComponent` 方法接收一个返回 Promise 的加载函数。这个 Promise 的 `resolve` 回调方法应该在从服务器获得组件定义时调用。你也可以调用 `reject(reason)` 表明加载失败。 +如你所見,`defineAsyncComponent` 方法接收一個返回 Promise 的加載函數。這個 Promise 的 `resolve` 回調方法應該在從服務器獲得組件定義時調用。你也可以調用 `reject(reason)` 表明加載失敗。 -[ES 模块动态导入](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)也会返回一个 Promise,所以多数情况下我们会将它和 `defineAsyncComponent` 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点),因此我们也可以用它来导入 Vue 单文件组件: +[ES 模塊動態導入](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)也會返回一個 Promise,所以多數情況下我們會將它和 `defineAsyncComponent` 搭配使用。類似 Vite 和 Webpack 這樣的構建工具也支持此語法 (並且會將它們作為打包時的代碼分割點),因此我們也可以用它來導入 Vue 單文件組件: ```js import { defineAsyncComponent } from 'vue' @@ -28,9 +28,9 @@ const AsyncComp = defineAsyncComponent(() => ) ``` -最后得到的 `AsyncComp` 是一个外层包装过的组件,仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件,所以你可以使用这个异步的包装组件无缝地替换原始组件,同时实现延迟加载。 +最後得到的 `AsyncComp` 是一個外層封裝過的組件,只在頁面需要它渲染時才會調用加載內部實際組件的函數。它會將接收到的 props 和插槽傳給內部組件,所以你可以使用這個異步的包裝組件無縫地替換原始組件,同時實現延遲加載。 -与普通组件一样,异步组件可以使用 `app.component()` [全局注册](/guide/components/registration#global-registration): +與普通組件一樣,異步組件可以使用 `app.component()` [全局註冊](/guide/components/registration#global-registration): ```js app.component('MyComponent', defineAsyncComponent(() => @@ -40,7 +40,7 @@ app.component('MyComponent', defineAsyncComponent(() =>
-你也可以在[局部注册组件](/guide/components/registration#local-registration)时使用 `defineAsyncComponent`: +你也可以在[局部註冊組件](/guide/components/registration#local-registration)時使用 `defineAsyncComponent`: ```vue