Skip to content

Commit 320908a

Browse files
Apply suggestions from code review
Co-authored-by: 时瑶 <[email protected]>
1 parent 6912db3 commit 320908a

File tree

5 files changed

+23
-22
lines changed

5 files changed

+23
-22
lines changed

src/api/composition-api-helpers.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!-- TODO: translation -->
2+
<!-- TODO: translation -->
23
# Composition API: Helpers {#composition-api-helpers}
34

45
## useAttrs() {#useattrs}

src/api/custom-elements.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!-- TODO: translation -->
2+
<!-- TODO: translation -->
23
# Custom Elements API {#custom-elements-api}
34

45
## defineCustomElement() {#definecustomelement}

src/api/ssr.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@
234234
值可以限制不匹配为特定类型。允许的值有:
235235

236236
- `text`
237-
- `children`仅允许直接子组件不匹配
237+
- `children` (仅允许直接子组件不匹配)
238238
- `class`
239239
- `style`
240240
- `attribute`

src/guide/built-ins/teleport.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const open = ref(false)
193193
</div>
194194
```
195195

196-
## 延迟 Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}
196+
## 延迟解析的 Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}
197197

198198
在 Vue 3.5 及更高版本中,我们可以使用 `defer` prop 推迟 Teleport 的目标解析,直到应用的其他部分挂载。这允许 Teleport 将由 Vue 渲染且位于组件树之后部分的容器元素作为目标:
199199

@@ -204,7 +204,7 @@ const open = ref(false)
204204
<div id="late-div"></div>
205205
```
206206

207-
请注意,目标元素必须与 Teleport 在同一个挂载/更新周期内渲染,即如果 `<div>` 只是在一秒后挂载,Teleport 仍然会报错。延迟 Teleport 的原理与 `mounted` 生命周期钩子类似。
207+
请注意,目标元素必须与 Teleport 在同一个挂载/更新周期内渲染,即如果 `<div>` 在一秒后才挂载,Teleport 仍然会报错。延迟 Teleport 的原理与 `mounted` 生命周期钩子类似。
208208

209209
---
210210

src/guide/components/async.md

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -108,32 +108,32 @@ const AsyncComp = defineAsyncComponent({
108108

109109
如果提供了一个报错组件,则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间,在请求耗时超过指定时间时也会渲染报错组件。
110110

111-
## 延迟水合 <sup class="vt-badge" data-text="3.5+" /> {#lazy-hydration}
111+
## 惰性激活 <sup class="vt-badge" data-text="3.5+" /> {#lazy-hydration}
112112

113113
> 如果你正在使用[服务器端渲染](/guide/scaling-up/ssr),这一部分才会适用。
114114
115-
在 Vue 3.5+ 中,异步组件可以通过提供水合策略来控制何时进行水合
115+
在 Vue 3.5+ 中,异步组件可以通过提供激活策略来控制何时进行激活
116116

117-
- Vue 提供了一些内置的水合策略。这些内置策略需要分别导入,以便在未使用时进行 tree-shaking
117+
- Vue 提供了一些内置的激活策略。这些内置策略需要分别导入,以便在未使用时进行 tree-shake
118118

119-
- 这个设计有意为之,低级别以获得灵活性。将来编译器语法糖可能可以在核心或高级别解决方案(如 Nuxt)中构建在此基础之上
119+
- 该设计有意保持在底层,以确保灵活性。将来可以在此基础上构建编译器语法糖,无论是在核心还是更上层的解决方案 (如 Nuxt) 中实现
120120

121-
### 在空闲时进行水合作用
121+
### 在空闲时进行激活
122122

123-
通过 `requestIdleCallback` 进行水合作用
123+
通过 `requestIdleCallback` 进行激活
124124

125125
```js
126126
import { defineAsyncComponent, hydrateOnIdle } from 'vue'
127127

128128
const AsyncComp = defineAsyncComponent({
129129
loader: () => import('./Comp.vue'),
130-
hydrate: hydrateOnIdle(/* optionally pass a max timeout */)
130+
hydrate: hydrateOnIdle(/* 传递可选的最大超时 */)
131131
})
132132
```
133133

134-
### 在可见时水合
134+
### 在可见时激活
135135

136-
当元素通过 `IntersectionObserver` 变为可见时进行水合
136+
通过 `IntersectionObserver` 在元素变为可见时进行激活
137137

138138
```js
139139
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
@@ -144,15 +144,15 @@ const AsyncComp = defineAsyncComponent({
144144
})
145145
```
146146

147-
可以选择传递一个观察者的选项对象值
147+
可以选择传递一个侦听器的选项对象值
148148

149149
```js
150150
hydrateOnVisible({ rootMargin: '100px' })
151151
```
152152

153-
### 在媒体查询匹配时进行水合作用
153+
### 在媒体查询匹配时进行激活
154154

155-
当指定的媒体查询匹配时进行水合作用
155+
当指定的媒体查询匹配时进行激活
156156

157157
```js
158158
import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue'
@@ -163,9 +163,9 @@ const AsyncComp = defineAsyncComponent({
163163
})
164164
```
165165

166-
### 交互时水合
166+
### 交互时激活
167167

168-
当组件元素上触发指定事件时进行水合。完成水合后,触发水合的事件也将被重新播放
168+
当组件元素上触发指定事件时进行激活。完成激活后,触发激活的事件也将被重放
169169

170170
```js
171171
import { defineAsyncComponent, hydrateOnInteraction } from 'vue'
@@ -188,16 +188,15 @@ hydrateOnInteraction(['wheel', 'mouseover'])
188188
import { defineAsyncComponent, type HydrationStrategy } from 'vue'
189189

190190
const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
191-
// forEachElement is a helper to iterate through all the root elememts
192-
// in the component's non-hydrated DOM, since the root can be a fragment
193-
// instead of a single element
191+
// forEachElement 是一个遍历组件未激活的 DOM 中所有根元素的辅助函数,
192+
// 因为根元素可能是一个模板片段而非单个元素
194193
forEachElement(el => {
195194
// ...
196195
})
197-
// call `hydrate` when ready
196+
// 准备好时调用 `hydrate`
198197
hydrate()
199198
return () => {
200-
// return a teardown function if needed
199+
// 如必要,返回一个销毁函数
201200
}
202201
}
203202

0 commit comments

Comments
 (0)