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

docs: translate reactive #218

Merged
merged 7 commits into from
Oct 25, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
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
6 changes: 3 additions & 3 deletions src/api/basic-reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
const obj = reactive({ count: 0 })
```

响应式转换是“”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的代理是**不**等于原始对象。建议只使用响应式代理,避免依赖原始对象。
响应式转换是“深层”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的代理是**不**等于原始对象。建议只使用响应式代理,避免依赖原始对象。
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
响应式转换是“深层”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的代理是****等于原始对象。建议只使用响应式代理,避免依赖原始对象。
响应式转换是“深层”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的代理是****等于原始对象的。建议只使用响应式代理,避免依赖原始对象。

Copy link
Member

Choose a reason for hiding this comment

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

这里漏了一个“代理”没处理。另外关于 proxy 的翻译,这里也讨论一下:https://github.com/orgs/vuejs/teams/docs-cn/discussions/12

Copy link
Member Author

Choose a reason for hiding this comment

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

“代理”的问题需要抽取出来单独处理,我会在下一个 PR 中,修复以下 suggested change


**类型声明:**

Expand Down Expand Up @@ -45,7 +45,7 @@ copy.count++ // 警告!

## `isReactive`

检查对象是否是 [`reactive`](#reactive)创建的响应式代理
检查对象是否是 [`reactive`](#reactive)创建的响应式 proxy。

```js
import { reactive, isReactive } from 'vue'
Expand All @@ -60,7 +60,7 @@ export default {
```


如果代理是 [`readonly`](#readonly) 创建的,但还包装了由 [`reactive`](#reactive) 创建的另一个代理,它也会返回 `true`。
如果 proxy 是 [`readonly`](#readonly) 创建的,但还包装了由 [`reactive`](#reactive) 创建的另一个 proxy,它也会返回 `true`。


```js{7-15}
Expand Down
4 changes: 2 additions & 2 deletions src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
- `from` property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
- `default` property 是降级情况下使用的 value

> 提示:提示:`provide` 和 `inject` 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的
> 提示:提示:`provide` 和 `inject` 绑定并不是响应式的。这是刻意为之的。然而,如果你传入了一个响应式的对象,那么其对象的 property 仍是响应式的

- **示例:**

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

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

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

```js
import { h, ref, reactive } from 'vue'
Expand Down
4 changes: 2 additions & 2 deletions src/api/refs-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ type CustomRefFactory<T> = (

```js
const foo = shallowRef({})
// 改变ref的值是响应式的
// 改变 ref 的值是响应式的
foo.value = {}
// 但是这个值不会被转换。
isReactive(foo.value) // false
Expand All @@ -225,7 +225,7 @@ watchEffect(() => {
console.log(shallow.value.greet)
})

// 这不会触发效果,因为ref很浅
// 这不会触发作用,因为 ref 很浅层
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
// 这不会触发作用,因为 ref 很浅层
// 这不会触发作用,因为 ref 是浅层的

Copy link
Member

Choose a reason for hiding this comment

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

effect flush timing 之前译为了“副作用刷新时机”。那么单独的 effect 我们是否应该翻译成“副作用”?

/cc @Jinjiang

shallow.value.greet = 'Hello, universe'

// 记录 "Hello, universe"
Expand Down
2 changes: 1 addition & 1 deletion src/api/special-attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

当 `v-for` 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!`$refs` 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!`$refs` 也是非响应式的,因此你不应该试图用它在模板中做数据绑定。

- **参考**[子组件 Refs](../guide/component-template-refs.html)

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 总是知道何时更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何响应式数据发生更改。还有一些情况下,你可能希望防止不必要的更新。

### 强制更新

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

减少重复


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

Expand Down
12 changes: 6 additions & 6 deletions src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ setup (props) {
}
```

这是我们的出发点,但它还不能工作,因为我们的 `repositories` 变量不是被动的。这意味着从用户的角度来看,仓库列表将保持为空。我们来解决这个问题!
这是我们的出发点,但它还不能工作,因为我们的 `repositories` 变量是非响应式的。这意味着从用户的角度来看,仓库列表将保持为空。我们来解决这个问题!

### 带 `ref` 的响应式变量

Expand Down Expand Up @@ -317,13 +317,13 @@ setup (props) {

const repositories = ref([])
const getUserRepositories = async () => {
// 更新`prop.user ` 到 `user.value`访问引用值
// 更新 `prop.user` 到 `user.value` 访问引用值
repositories.value = await fetchUserRepositories(user.value)
}

onMounted(getUserRepositories)

// 在用户prop的响应式引用上设置一个侦听器
// 在用户 prop 的响应式引用上设置一个侦听器
watch(user, getUserRepositories)

return {
Expand Down Expand Up @@ -363,18 +363,18 @@ import { ref, onMounted, watch, toRefs, computed } from 'vue'

// in our component
setup (props) {
// 使用 `toRefs` 创建对props的 `user` property 的响应式引用
// 使用 `toRefs` 创建对 props 的 `user` property 的响应式引用
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
// 使用 `toRefs` 创建对 props `user` property 的响应式引用
// 使用 `toRefs` 创建对 props 中的 `user` property 的响应式引用

const { user } = toRefs(props)

const repositories = ref([])
const getUserRepositories = async () => {
// 更新`props.user ` 到 `user.value`访问引用值
// 更新 `props.user ` 到 `user.value` 访问引用值
repositories.value = await fetchUserRepositories(user.value)
}

onMounted(getUserRepositories)

// 在用户prop的响应式引用上设置一个侦听器
// 在用户 prop 的响应式引用上设置一个侦听器
watch(user, getUserRepositories)

const searchQuery = ref('')
Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/render-function-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default {

### 3.x 语法

在 3.x 中,由于 `render` 函数不再接收任何参数,它将主要用于 `setup()` 函数内部。这还有一个好处:可以访问作用域中声明的被动状态和函数,以及传递给 `setup()` 的参数。
在 3.x 中,由于 `render` 函数不再接收任何参数,它将主要用于 `setup()` 函数内部。这还有一个好处:可以访问作用域中声明的响应式状态和函数,以及传递给 `setup()` 的参数。


```js
Expand Down
6 changes: 3 additions & 3 deletions 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 Expand Up @@ -146,8 +146,8 @@ watchEffect(

`onTrack` 和 `onTrigger` 选项可用于调试侦听器的行为。

- 当响应式 property 或 ref 作为依赖项被追踪时,将调用 `onTrack`
- 当依赖项变更导致副作用被触发时,将调用 `onTrigger`
- `onTrack` 将在响应式 property 或 ref 作为依赖项被追踪时被调用。
- `onTrigger` 将在依赖项变更导致副作用被触发时被调用。

这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 `debugger` 语句来检查依赖关系:

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

### Ref 展开

当 ref 作为渲染上下文 (从 [setup ()](composition-api-setup.html) 中返回的对象) 上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 `.value`:
当 ref 作为渲染上下文 (从 [setup()](composition-api-setup.html) 中返回的对象) 上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 `.value`:

```vue-html
<template>
Expand Down
2 changes: 1 addition & 1 deletion src/style-guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1343,7 +1343,7 @@ computed: {
5. **组合 API** (使用组合 API 的入口点)
- `setup`

6. **Local State** (本地的响应式 property)
6. **Local State** (原生响应式 property)
Copy link
Member

Choose a reason for hiding this comment

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

这个应该是本地的吧

- `data`
- `computed`

Expand Down