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 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
2 changes: 1 addition & 1 deletion src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const sidebar = {
]
},
{
title: '高级指南',
title: '高阶指南',
collapsable: false,
children: [{
title: '响应式',
Expand Down
2 changes: 1 addition & 1 deletion src/api/basic-reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ console.log(isReactive(bar.foo)) // false
当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能。


它们被认为是高级的,因为原始选择退出仅在根级别,因此,如果将嵌套的、未标记的原始对象设置为响应式对象,然后再次访问它,则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作:
它们被认为是高阶的,因为原始选择退出仅在根级别,因此,如果将嵌套的、未标记的原始对象设置为响应式对象,然后再次访问它,则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作:

```js
const foo = markRaw({
Expand Down
2 changes: 1 addition & 1 deletion src/api/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ createApp({
})
```

对于高级用法,`defineAsyncComponent` 可以接受对象:
对于高阶用法,`defineAsyncComponent` 可以接受对象:

`defineAsyncComponent` 方法还可以返回以下格式的对象:

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

- **详细:**

包含了父作用域中不作为组件 [props](./options-data.html#props) 或[自定义事件](./options-data.html#emits)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高级别的组件时非常有用
包含了父作用域中不作为组件 [props](./options-data.html#props) 或[自定义事件](./options-data.html#emits)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高阶的组件时非常有用

- **参考**
- [非 Prop Attributes](../guide/component-attrs.html)
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` 还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态

```js
import { h, ref, reactive } from 'vue'
Expand Down
2 changes: 1 addition & 1 deletion src/api/options-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

- **详细:**

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高阶选项,如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项:

Expand Down
2 changes: 1 addition & 1 deletion src/guide/a11y-standards.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

### Web 可访问性倡议——可访问的富互联网应用程序 (WAI-ARIA)

W3C 的 WAI-ARIA 为如何构建动态内容和高级用户界面控件提供了指导
W3C 的 WAI-ARIA 为如何构建动态内容和高阶用户界面控件提供了指导

- [可访问的富 Internet 应用程序 (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/)
- [WAI-ARIA 创造实践 1.2](https://www.w3.org/TR/wai-aria-practices-1.2/)
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` 属性。

但是,如果你已经排除了上述情况,并且发现自己处于这种非常罕见的情况下,必须手动强制更新,那么你可以使用 [`$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 的响应性
:::

如果需要销毁 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
6 changes: 3 additions & 3 deletions src/guide/contributing/writing-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
- 提供一个不到 30 分钟的项目解决的问题和如何解决的概述,包括何时和为什么使用项目以及一些简单的代码示例。最后,链接到安装页面和要点指南的开头。

- **指南**:让用户感到聪明、强大、好奇,然后保持这种状态,让用户保持不断学习的动力和认知能力。指南页是按顺序阅读的,因此通常应该从最高到最低的功率/工作比排序。
- **要点**:阅读要领的时间不应超过 5 个小时,但越短越好。它的目标是提供 20%的知识来帮助用户处理 80%的用例。Essentials 可以链接到更高级的指南和 API,不过,在大多数情况下,你应该避免此类链接。当它们被提供时,你还需要提供一个上下文,以便用户知道他们是否应该在第一次阅读时遵循这个链接。否则,许多用户最终会耗尽他们的认知能力,跳转链接,试图在继续之前全面了解一个功能的各个方面,结果是,永远无法完成第一次通读的要领。记住,通顺的阅读比彻底的阅读更重要。我们想给人们提供他们需要的信息,以避免令人沮丧的经历,但他们总是可以回来继续阅读,或者在谷歌遇到一个不太常见的问题。
- **要点**:阅读要领的时间不应超过 5 个小时,但越短越好。它的目标是提供 20%的知识来帮助用户处理 80%的用例。Essentials 可以链接到更高阶的指南和 API,不过,在大多数情况下,你应该避免此类链接。当它们被提供时,你还需要提供一个上下文,以便用户知道他们是否应该在第一次阅读时遵循这个链接。否则,许多用户最终会耗尽他们的认知能力,跳转链接,试图在继续之前全面了解一个功能的各个方面,结果是,永远无法完成第一次通读的要领。记住,通顺的阅读比彻底的阅读更重要。我们想给人们提供他们需要的信息,以避免令人沮丧的经历,但他们总是可以回来继续阅读,或者在谷歌遇到一个不太常见的问题。

- **高阶**:虽然要点帮助人们处理大约 80%的用例,但后续的指南帮助用户了解 95%的用例,以及关于非基本特性 (例如转换、动画)、更复杂的便利特性 (例如 mixin、自定义指令) 和开发人员体验改进 (例如 JSX、插件) 的更详细信息。最后 5%的用例是更利基的、更复杂的和/或更容易被滥用的,将留给烹饪书和 API 参考,它们可以从这些高级指南链接到
- **高阶**:虽然要点帮助人们处理大约 80%的用例,但后续的指南帮助用户了解 95%的用例,以及关于非基本特性 (例如转换、动画)、更复杂的便利特性 (例如 mixin、自定义指令) 和开发人员体验改进 (例如 JSX、插件) 的更详细信息。最后 5%的用例是更利基的、更复杂的和/或更容易被滥用的,将留给烹饪书和 API 参考,它们可以从这些高阶指南链接到
- **引用/API**:提供功能的完整列表,包括类型信息,每个要解决的问题的描述,选项的每种组合的示例以及指向指南,食谱的食谱以及提供更多详细信息的其他内部资源的链接。与其他页面不同,此页面无意自上而下阅读,因此可以提供大量详细信息。这些参考资料还必须比指南更容易浏览,因此格式应比指南的讲故事格式更接近字典条目。
- **迁移**:
- **版本**:当进行了重要的更改时,包含一个完整的更改列表是很有用的,包括对为什么进行更改以及如何迁移其项目的详细解释。
Expand All @@ -51,7 +51,7 @@


- **几乎总是避免幽默 (对于英文文档)**, 尤其是讽刺和通俗文化的引用,因为它在不同文化之间的翻译并不好。
- **永远不要假设比你必须的更高级的上下文**。
- **永远不要假设比你必须的更高阶的上下文**。
- **在大多数情况下,比起在多个部分中重复相同的内容,更喜欢在文档的各个部分之间建立链接**。在内容上有些重复是不可避免的,甚至是学习的必要条件。然而,过多的重复也会使文档更难维护,因为 API 的更改将需要在许多地方进行更改,而且很容易遗漏某些内容。这是一个很难达到的平衡。
- **具体的比一般的好**例如,一个 `<BlogPost>` 组件例子比 `<ComponentA>` 更好。
- **相对胜于晦涩**。例如,一个 `<BlogPost>` 组件例子比 `<CurrencyExchangeSettings>` 更好。
Expand Down
6 changes: 3 additions & 3 deletions src/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,8 @@ Vue 为最常用的键提供了别名:

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 `v-on` 或 `@` 有几个好处:

1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2.因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
2 changes: 1 addition & 1 deletion src/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## 发布版本说明

最新 beta 版本:3.0.0-rc.9
最新 beta 版本:![beta](https://img.shields.io/npm/v/vue/next.svg)

每个版本的详细发行说明可在 [GitHub](https://github.com/vuejs/vue-next/releases) 上找到。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -350,4 +350,4 @@ app.mount('#todo-list-app')

## 准备好了吗?

我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能,所以请务必读完整个教程!
我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程!
2 changes: 1 addition & 1 deletion src/guide/migration/async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ badges:
const asyncPage = () => import('./NextPage.vue')
```

或者,对于带有选项的更高级组件语法
或者,对于带有选项的更高阶组件语法

```js
const asyncPage = {
Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

很高兴你这么问!答案是不。我们已经尽了很大的努力来确保大部分 API 是相同的,核心概念没有改变。它很长,因为我们喜欢提供非常详细的解释和包括很多例子。放心。**这不是你必须从头开始阅读的东西**

我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html),这完全是附加的-前面的选项 API 将继续受到支持,因为组合 API 是一个高级特性
我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html),这完全是附加的-前面的选项 API 将继续受到支持,因为组合 API 是一个高阶特性

## 概览

Expand Down Expand Up @@ -59,7 +59,7 @@ Vue 3 中需要关注的一些新功能包括:

> 迁移助手仍在开发中

1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高级 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能,他们会让你知道,提供建议,并提供更多信息的链接。
1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高阶 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能,他们会让你知道,提供建议,并提供更多信息的链接。

2. 之后,在侧边栏中浏览此页面的目录。如果你看到一个可能会影响你的主题,但是迁移帮助程序没有捕捉到,请查看它。

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 @@ -48,7 +48,7 @@ export default {
}
```

## render 函数签名更改
## 渲染函数签名更改

### 2.x 语法

Expand Down
2 changes: 1 addition & 1 deletion src/guide/migration/slots-unification.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ badges:

## 2.x 语法

当使用 render 函数时,即 `h`,2.x 用于在内容节点上定义 `slot` data property。
当使用渲染函数时,即 `h`,2.x 用于在内容节点上定义 `slot` data property。

```js
// 2.x 语法
Expand Down
Loading