Skip to content
This repository has been archived by the owner on Aug 8, 2022. It is now read-only.

docs: update reactive translation #52

Closed
wants to merge 19 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@

- **渲染函数/JSX 的方法**

`setup` 还可以返回一个 render 函数,该函数可以直接使用在同一作用域中声明的反应状态
`setup` 还可以返回一个 render 函数,该函数可以直接使用在同一作用域中声明的响应式状态
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`setup` 还可以返回一个 render 函数,该函数可以直接使用在同一作用域中声明的响应式状态:
`setup` 还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态:


```js
import { h, ref, reactive } from 'vue'
Expand Down
4 changes: 2 additions & 2 deletions src/guide/component-edge-cases.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@

## 控制更新

感谢 Vue 的反应系统,它总是知道什么时候更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何反应性数据发生更改。还有一些情况下,你可能希望防止不必要的更新。
感谢 Vue 的响应式系统,它总是知道什么时候更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何响应式数据发生更改。还有一些情况下,你可能希望防止不必要的更新。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
感谢 Vue 的响应式系统,它总是知道什么时候更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何响应式数据发生更改。还有一些情况下,你可能希望防止不必要的更新。
得益于其响应式系统,Vue 总是知道何时更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何响应式数据发生更改。还有一些情况下,你可能希望防止不必要的更新。


### 强制更新

如果你发现自己需要在 Vue 中强制更新,在 99.99%的情况下,你在某个地方犯了错误。例如,你可能依赖于 Vue 反应性系统未跟踪的状态,例如,在组件创建之后添加了 `data` 属性。
如果你发现自己需要在 Vue 中强制更新,在 99.99%的情况下,你在某个地方犯了错误。例如,你可能依赖于 Vue 响应式系统未跟踪的状态,例如,在组件创建之后添加了 `data` 属性。

但是,如果你已经排除了上述情况,并且发现自己处于这种非常罕见的情况下,必须手动强制更新,那么你可以使用 [`$forceUpdate`](../api/instance-methods.html#forceupdate)。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/component-provide-inject.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ app.component('todo-list', {

## 与响应式一起工作
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我在想,reactive 译为“响应式”的话,reactivity 是不是翻译为“响应性”更好?

@veaba @Jinjiang

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我在想,reactive 译为“响应式”的话,reactivity 是不是翻译为“响应性”更好?

@veaba @Jinjiang

你这么一说,我自己都糊涂了,:joy: 响应式响应性 分不清。

我摘了英文版 实际例子来对比下。

例子 代入翻译
reactive proxy 响应式prop
reactive state 响应式状态
reactive property 响应式 property
reactivity tracking 响应性追踪
losing reactivity 丢失响应性
reactivity system 响应性系统

好像也说的过去,响应式 换成 响应性可以,但反过来,似乎不是很顺。


在上面的例子中,如果我们更改了 `todos` 的列表,这个更改将不会反映在注入的 `todoLength` property 中。这是因为默认情况下,`provide/inject` 绑定*不*是被动绑定。我们可以通过将 `ref` property 或 `reactive` 对象传递给 `provide` 来更改此行为。在我们的例子中,如果我们想对祖先组件中的更改做出反应,我们需要为我们提供的 `todoLength` 分配一个组合 API `computed` property:
在上面的例子中,如果我们更改了 `todos` 的列表,这个更改将不会反映在注入的 `todoLength` property 中。这是因为默认情况下,`provide/inject` 绑定*不*是被动绑定。我们可以通过将 `ref` property 或 `reactive` 对象传递给 `provide` 来更改此行为。在我们的例子中,如果我们想对祖先组件中的更改做出响应,我们需要为我们提供的 `todoLength` 分配一个组合 API `computed` property:

```js
app.component('todo-list', {
Expand Down
4 changes: 2 additions & 2 deletions src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ setup (props) {
}
```

现在我们需要对 `user` prop 所做的更改做出反应。为此,我们将使用独立的 `watch` 函数。
现在我们需要对 `user` prop 所做的更改做出响应。为此,我们将使用独立的 `watch` 函数。

### `watch` 响应式更改

Expand Down Expand Up @@ -328,7 +328,7 @@ setup (props) {
}
```

你可能已经注意到在我们的 `setup` 的顶部使用了 `toRefs`。这是为了确保我们的侦听器能够对 `user` prop 所做的更改做出反应
你可能已经注意到在我们的 `setup` 的顶部使用了 `toRefs`。这是为了确保我们的侦听器能够对 `user` prop 所做的更改做出响应

有了这些变化,我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作—基于 `searchQuery` 进行过滤,这次是使用计算属性。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/composition-api-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default {
```

:::warning
但是,因为 `props` 是响应性的,你不能**使用 ES6 解构**,因为它会消除 prop 的反应性
但是,因为 `props` 是响应性的,你不能**使用 ES6 解构**,因为它会消除 prop 的响应式
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同上

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Justineo#53 讨论的,形容词reactive 用响应式,名词reactivity用响应性

:::

如果需要销毁 prop,可以通过使用 `setup` 函数中的 [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) 来安全地完成此操作。
Expand Down
2 changes: 1 addition & 1 deletion src/guide/computed.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ methods: {
}
```

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是**计算属性是基于它们的反应依赖关系缓存的**。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `author.books` 还没有发生改变,多次访问 `publishedBookMessage` 计算属性会立即返回之前的计算结果,而不必再次执行函数。
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是**计算属性是基于它们的响应式依赖关系缓存的**。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `author.books` 还没有发生改变,多次访问 `publishedBookMessage` 计算属性会立即返回之前的计算结果,而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新,因为 Date.now () 不是响应式依赖:

Expand Down
2 changes: 1 addition & 1 deletion src/guide/reactivity-computed-watchers.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ console.log(count.value) // 0

## `watchEffect`

为了根据反应状态*自动应用*和*重新应用*副作用,我们可以使用 `watchEffect` 方法。它立即运行一个函数,同时反应性地跟踪其依赖项,并在依赖项发生更改时重新运行它。
为了根据响应式状态*自动应用*和*重新应用*副作用,我们可以使用 `watchEffect` 方法。它立即运行一个函数,同时响应式地跟踪其依赖项,并在依赖项发生更改时重新运行它。

```js
const count = ref(0)
Expand Down
4 changes: 2 additions & 2 deletions src/guide/reactivity-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const state = reactive({

Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。由于依赖关系跟踪,视图在被动状态更改时自动更新。

这就是 Vue 响应式系统的本质。当从组件中的 `data()` 返回一个对象时,它在内部由 `reactive()` 使其成为反应对象。模板被编译成[渲染函数](render-function.html) 利用了这些响应式性质。
这就是 Vue 响应式系统的本质。当从组件中的 `data()` 返回一个对象时,它在内部由 `reactive()` 使其成为响应式对象。模板被编译成[渲染函数](render-function.html) 利用了这些响应式性质。


在[响应式基础 API](../api/basic-reactivity.html) 章节你可以学习更多关于 `reactive` 的内容
Expand Down Expand Up @@ -150,7 +150,7 @@ console.log(book.title) // 'Vue 3 Detailed Guide'

## 防止使用 `readonly` 转换响应式对象

有时我们想跟踪反应对象 (`ref` 或 `reactive`) 的变化,但我们也希望防止从应用程序的某个位置更改它。例如,当我们有一个 [provide](component-provide-inject.html) 响应式对象,我们要防止它在注入的地方发生转换。为此,我们可以为原始对象创建一个只读 Proxy:
有时我们想跟踪响应式对象 (`ref` 或 `reactive`) 的变化,但我们也希望防止从应用程序的某个位置更改它。例如,当我们有一个 [provide](component-provide-inject.html) 响应式对象,我们要防止它在注入的地方发生转换。为此,我们可以为原始对象创建一个只读 Proxy:

```js
import { reactive, readonly } from 'vue'
Expand Down