Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: 时瑶 <[email protected]>
  • Loading branch information
ikxin and KiritaniAyaka authored Sep 10, 2024
1 parent d044079 commit 07b415c
Show file tree
Hide file tree
Showing 15 changed files with 56 additions and 55 deletions.
10 changes: 5 additions & 5 deletions src/api/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -627,7 +627,7 @@ console.log(app.config)

## app.config.idPrefix <sup class="vt-badge" data-text="3.5+" /> {#app-config-idprefix}

通过 [useId()](/api/general#useid) 配置此应用程序中生成的所有 ID 的前缀。
配置此应用中通过 [useId()](/api/general#useid) 生成的所有 ID 的前缀。

- **类型:** `string`

Expand All @@ -640,7 +640,7 @@ console.log(app.config)
```

```js
// in a component:
// 在组件中:
const id1 = useId() // 'my-app:0'
const id2 = useId() // 'my-app:1'
```
Expand All @@ -655,10 +655,10 @@ console.log(app.config)

- **详情**

默认情况下,在 Vue 应用程序中抛出的但未显式处理的错误在开发模式和生产模式之间有不同的行为
默认情况下,在 Vue 应用中抛出但未显式处理的错误在开发和生产模式下有不同的行为

- 在开发模式下,错误会被抛出并可能导致应用程序崩溃。这是为了使错误更加突出,以便在开发过程中被注意到并修复。
- 在开发模式下,错误会被抛出并可能导致应用崩溃。这是为了使错误更加突出,以便在开发过程中被注意到并修复。

- 在生产模式下,错误只会被记录到控制台以尽量减少对最终用户的影响。然而,这可能会阻止只在生产中发生的错误被错误监控服务捕获
- 在生产模式下,错误只会被记录到控制台以尽量减少对最终用户的影响。然而,这可能会导致只在生产中发生的错误无法被错误监控服务捕获

通过将 `app.config.throwUnhandledErrorInProduction` 设置为 `true`,即使在生产模式下也会抛出未处理的错误。
10 changes: 5 additions & 5 deletions src/api/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,9 @@ h(Transition, {
*/
disabled?: boolean
/**
* When `true`, the Teleport will defer until other
* parts of the application have been mounted before
* resolving its target. (3.5+)
* 当值为 `true` 时,Teleport 将推迟
* 直到应用的其他部分挂载后
* 再解析其目标。(3.5+)
*/
defer?: boolean
}
Expand All @@ -313,12 +313,12 @@ h(Transition, {
</Teleport>
```

推迟目标解决 <sup class="vt-badge" data-text="3.5+" />:
推迟解析目标 <sup class="vt-badge" data-text="3.5+" />:

```vue-html
<Teleport defer to="#late-div">...</Teleport>
<!-- somewhere later in the template -->
<!-- 稍后出现于模板中的某处 -->
<div id="late-div"></div>
```

Expand Down
10 changes: 5 additions & 5 deletions src/api/built-in-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -259,17 +259,17 @@

- **缩写:**
- `:` 或者 `.` (当使用 `.prop` 修饰符)
- 省略值(当属性和绑定值具有相同的名称时,需要 3.4+)
- 值可以省略(当 attribute 和绑定的值同名时,需要 3.4+ 版本

- **期望:**`any (带参数) | Object (不带参数)`

- **参数:**`attrOrProp (可选的)`

- **修饰符**

- `.camel` - 将 kebab-case 属性名称转换为 camelCase
- `.prop` - 强制绑定为 DOM 属性(3.2+)。
- `.attr` - 强制绑定为 DOM 属性(3.2+)。
- `.camel` - 将短横线命名的 attribute 转变为驼峰式命名
- `.prop` - 强制绑定为 DOM property(3.2+)。
- `.attr` - 强制绑定为 DOM attribute(3.2+)。

- **用途**

Expand Down Expand Up @@ -470,7 +470,7 @@

## v-memo {#v-memo}

- Only supported in 3.2+
- 仅在 3.2+ 中支持

- **期望的绑定值类型:**`any[]`

Expand Down
2 changes: 1 addition & 1 deletion src/api/built-in-special-attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@

- **预期**`string | Component`

- **本地元素的使用**
- **用于原生元素**

- 仅在 3.1+ 中支持

Expand Down
2 changes: 1 addition & 1 deletion src/api/composition-api-dependency-injection.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@

## hasInjectionContext() {#has-injection-context}

- Only supported in 3.3+
- 仅在 3.3+ 中支持

如果 [inject()](#inject) 可以在错误的地方 (例如 `setup()` 之外) 被调用而不触发警告,则返回 `true`。此方法适用于希望在内部使用 `inject()` 而不向用户发出警告的库。

Expand Down
2 changes: 1 addition & 1 deletion src/api/general.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@

### 函数签名 {#function-signature}

- 仅支持 3.3+
- 仅在 3.3+ 中支持

`defineComponent()` 还有一种备用签名,旨在与组合式 API 和[渲染函数或 JSX](/guide/extras/render-function.html) 一起使用。

Expand Down
4 changes: 2 additions & 2 deletions src/api/options-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@

## slots<sup class="vt-badge ts"/> {#slots}

- 仅支持 3.3+
- 仅在 Vue 3.3+ 中支持。

An option to assist with type inference when using slots programmatically in render functions.
一个在渲染函数中以编程方式使用插槽时辅助类型推断的选项。

- **详情**

Expand Down
2 changes: 1 addition & 1 deletion src/api/reactivity-advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@

这个方法可以作为可复用的组合式函数中 `onUnmounted` 的替代品,它并不与组件耦合,因为每一个 Vue 组件的 `setup()` 函数也是在一个 effect 作用域中调用的。

如果在没有活动效果范围的情况下调用此函数,将会抛出警告。在 3.5 版本及以上,可以通过将 `true` 作为第二个参数传递来抑制此警告
如果在没有 effect 作用域的情况下调用此函数,将会抛出警告。在 3.5+ 版本中,可以通过将第二个参数设为 `true` 来抑制此警告

- **类型**

Expand Down
31 changes: 16 additions & 15 deletions src/api/reactivity-core.md
Original file line number Diff line number Diff line change
Expand Up @@ -300,12 +300,12 @@
stop()
```

暂停/恢复观察者:<sup class="vt-badge" data-text="3.5+" />
暂停/恢复侦听器:<sup class="vt-badge" data-text="3.5+" />

```js
const { stop, pause, resume } = watchEffect(() => {})
// 临时暂停观察者
// 暂停侦听器
pause()
// 稍后恢复
Expand All @@ -320,8 +320,8 @@
```js
watchEffect(async (onCleanup) => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 更改,则将调用 `cancel`
// 如果之前的请求尚未完成
// 如果 `id` 变化,则调用 `cancel`
// 如果之前的请求未完成,则取消该请求
onCleanup(cancel)
data.value = await response
})
Expand All @@ -334,8 +334,8 @@
watchEffect(async () => {
const { response, cancel } = doAsyncWork(newId)
// `cancel` will be called if `id` changes, cancelling
// the previous request if it hasn't completed yet
// 如果 `id` 变化,则调用 `cancel`
// 如果之前的请求未完成,则取消该请求
onWatcherCleanup(cancel)
data.value = await response
})
Expand Down Expand Up @@ -411,7 +411,7 @@
}
interface WatchHandle {
(): void // callable, same as `stop`
(): void // 可调用,与 `stop` 相同
pause: () => void
resume: () => void
stop: () => void
Expand All @@ -438,10 +438,10 @@
第三个可选的参数是一个对象,支持以下这些选项:

- **`immediate`**:在侦听器创建时立即触发回调。第一次调用时旧值是 `undefined`
- **`deep`**:如果源是对象,则强制进行深度遍历,以便在深度变化时触发回调。在 3.5+ 版本中,此参数还可以是指示最大遍历深度的数字。请参阅[深度观察者](/guide/essentials/watchers#deep-watchers)。
- **`deep`**:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。在 3.5+ ,此参数还可以是指示最大遍历深度的数字。参考[深层侦听器](/guide/essentials/watchers#deep-watchers)。
- **`flush`**:调整回调函数的刷新时机。参考[回调的刷新时机](/guide/essentials/watchers#callback-flush-timing)及 [`watchEffect()`](/api/reactivity-core#watcheffect)。
- **`onTrack / onTrigger`**:调试侦听器的依赖。参考[调试侦听器](/guide/extras/reactivity-in-depth#watcher-debugging)。
- **`once`**:(3.4+仅运行回调一次。观察者在第一次回调运行后自动停止
- **`once`**:(3.4+回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止

与 [`watchEffect()`](#watcheffect) 相比,`watch()` 使我们可以:

Expand Down Expand Up @@ -525,18 +525,18 @@
stop()
```

暂停/恢复观察者: <sup class="vt-badge" data-text="3.5+" />
暂停/恢复侦听器: <sup class="vt-badge" data-text="3.5+" />

```js
const { stop, pause, resume } = watchEffect(() => {})
// temporarily pause the watcher
// 暂停侦听器
pause()
// resume later
// 稍后恢复
resume()
// stop
// 停止
stop()
```

Expand Down Expand Up @@ -571,7 +571,7 @@

## onWatcherCleanup() <sup class="vt-badge" data-text="3.5+" /> {#onwatchercleanup}

注册一个清理函数,当前的观察者即将重新运行时执行。只能在 `watchEffect` 效果函数或 `watch` 回调函数的同步执行期间调用(即不能在异步函数的 `await` 语句之后调用)。
注册一个清理函数,在当前侦听器即将重新运行时执行。只能在 `watchEffect` 作用函数或 `watch` 回调函数的同步执行期间调用(即不能在异步函数的 `await` 语句之后调用)。

- **类型**

Expand All @@ -589,7 +589,8 @@
watch(id, (newId) => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 发生更改,将调用 `cancel` 来取消前一个请求,以防它尚未完成。
// 如果 `id` 变化,则调用 `cancel`
// 如果之前的请求未完成,则取消该请求
onWatcherCleanup(cancel)
})
```
2 changes: 1 addition & 1 deletion src/api/reactivity-utilities.md
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@

## toValue() {#tovalue}

- Only supported in 3.3+
- 仅在 3.3+ 中支持

将值、refsgetters 规范化为值。这与 [unref()](#unref) 类似,不同的是此函数也会规范化 getter 函数。如果参数是一个 getter,它将会被调用并且返回它的返回值。

Expand Down
14 changes: 7 additions & 7 deletions src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -217,8 +217,8 @@ const emit = defineEmits<{
const { foo } = defineProps(['foo'])

watchEffect(() => {
// runs only once before 3.5
// re-runs when the "foo" prop changes in 3.5+
// 3.5 之前仅运行一次
// 在 3.5+ 版本中会在 "foo" prop 改变时重新运行
console.log(foo)
})
```
Expand All @@ -229,12 +229,12 @@ watchEffect(() => {
const props = defineProps(['foo'])

watchEffect(() => {
// `foo` transformed to `props.foo` by the compiler
// `foo` 由编译器转换为 `props.foo`
console.log(props.foo)
})
```

此外,您可以使用 JavaScript 的本机默认值语法为 props 声明默认值。当使用基于类型的 props 声明时,这特别有用
此外,你可以使用 JavaScript 原生的默认值语法声明 props 默认值。这在使用基于类型的 props 声明时特别有用

```ts
interface Props {
Expand Down Expand Up @@ -269,7 +269,7 @@ const props = withDefaults(defineProps<Props>(), {

## defineModel() {#definemodel}

- Only available in 3.4+
- 仅在 3.4+ 中可用

这个宏可以用来声明一个双向绑定 prop,通过父组件的 `v-model` 来使用。[组件 `v-model`](/guide/components/v-model) 指南中也讨论了示例用法。

Expand Down Expand Up @@ -381,7 +381,7 @@ defineExpose({

## defineOptions() {#defineoptions}

- 仅支持 3.3+
- 仅在 3.3+ 中支持

这个宏可以用来直接在 `<script setup>` 中声明组件选项,而不必使用单独的 `<script>` 块:

Expand All @@ -400,7 +400,7 @@ defineOptions({

## defineSlots() <sup class="vt-badge ts"/> {#defineslots}

- 仅支持 3.3+
- 仅在 3.3+ 中支持

这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。

Expand Down
10 changes: 5 additions & 5 deletions src/api/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -223,20 +223,20 @@

## data-allow-mismatch <sup class="vt-badge" data-text="3.5+" /> {#data-allow-mismatch}

A special attribute that can be used to suppress [hydration mismatch](/guide/scaling-up/ssr#hydration-mismatch) warnings.
可以抑制[激活不匹配](/guide/scaling-up/ssr#hydration-mismatch)警告的特殊 attribute

- **Example**
- **示例**

```html
<div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>
```

The value can limit the allowed mismatch to a specific type. Allowed values are:
值可以限制不匹配为特定类型。允许的值有:

- `text`
- `children` (only allows mismatch for direct children)
- `children`(仅允许直接子组件不匹配)
- `class`
- `style`
- `attribute`

If no value is provided, all types of mismatches will be allowed.
如果没有提供值,则会允许所有类型的不匹配。
2 changes: 1 addition & 1 deletion src/api/utility-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@

- 仅在 3.3+ 版本中支持。

Extract prop types from a runtime props options object. The extracted types are public facing - i.e. the props that the parent is allowed to pass.
从运行时的 props 选项对象中提取 prop。提取的类型是面向外部的,即父组件允许传递的 props

- **示例**

Expand Down
2 changes: 1 addition & 1 deletion src/guide/best-practices/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const Foo = defineAsyncComponent(() => import('./Foo.vue'))

### 计算属性稳定性 {#computed-stability}

在 Vue 3.4 及更高版本中,计算属性只有在其计算值与上一个值不同时才会触发效果。例如,下面的 `isEven` 计算属性只有在返回的值从 `true` 变为 `false`,或者从 `false` 变为 `true` 时才会触发效果
在 Vue 3.4 及更高版本中,计算属性仅在其计算值较前一个值发生更改时才会触发副作用。例如,以下 `isEven` 计算属性仅在返回值从 `true` 更改为 `false` 时才会触发副作用,反之亦然

```js
const count = ref(0)
Expand Down
8 changes: 4 additions & 4 deletions src/guide/built-ins/teleport.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,18 +193,18 @@ const open = ref(false)
</div>
```

## Deferred Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}
## 延迟 Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}

In Vue 3.5 and above, we can use the `defer` prop to defer the target resolving of a Teleport until other parts of the application have mounted. This allows the Teleport to target a container element that is rendered by Vue, but in a later part of the component tree:
Vue 3.5 及更高版本中,我们可以使用 `defer` prop 推迟 Teleport 的目标解析,直到应用的其他部分挂载。这允许 Teleport 将由 Vue 渲染且位于组件树之后部分的容器元素作为目标:

```vue-html
<Teleport defer to="#late-div">...</Teleport>
<!-- somewhere later in the template -->
<!-- 稍后出现于模板中的某处 -->
<div id="late-div"></div>
```

Note that the target element must be rendered in the same mount / update tick with the Teleport - i.e. if the `<div>` is only mounted a second later, the Teleport will still report an error. The defer works similarly to the `mounted` lifecycle hook.
请注意,目标元素必须与 Teleport 在同一个挂载/更新周期内渲染,即如果 `<div>` 只是在一秒后挂载,Teleport 仍然会报错。延迟 Teleport 的原理与 `mounted` 生命周期钩子类似。

---

Expand Down

0 comments on commit 07b415c

Please sign in to comment.