diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 006972768..dcb2fdba5 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -58,7 +58,7 @@ const sidebar = { ] }, { - title: '高级指南', + title: '高阶指南', collapsable: false, children: [{ title: '响应式', diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md index ef42eb588..68c4a54cc 100644 --- a/src/api/basic-reactivity.md +++ b/src/api/basic-reactivity.md @@ -120,7 +120,7 @@ console.log(isReactive(bar.foo)) // false 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。 -它们被认为是高级的，因为原始选择退出仅在根级别，因此，如果将嵌套的、未标记的原始对象设置为响应式对象，然后再次访问它，则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作： +它们被认为是高阶的，因为原始选择退出仅在根级别，因此，如果将嵌套的、未标记的原始对象设置为响应式对象，然后再次访问它，则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作： ```js const foo = markRaw({ diff --git a/src/api/global-api.md b/src/api/global-api.md index 8b972d70b..3f21611b7 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -163,7 +163,7 @@ createApp({ }) ``` -对于高级用法，`defineAsyncComponent` 可以接受对象： +对于高阶用法，`defineAsyncComponent` 可以接受对象： `defineAsyncComponent` 方法还可以返回以下格式的对象： diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md index 28a5d7498..0261bb10c 100644 --- a/src/api/instance-properties.md +++ b/src/api/instance-properties.md @@ -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) diff --git a/src/api/options-composition.md b/src/api/options-composition.md index 47d7a72bf..69ff0d37f 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -225,7 +225,7 @@ - **渲染函数/JSX 的方法** - `setup` 还可以返回一个 render 函数，该函数可以直接使用在同一作用域中声明的反应状态： + `setup` 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态： ```js import { h, ref, reactive } from 'vue' diff --git a/src/api/options-data.md b/src/api/options-data.md index 4f0b7af55..31270a6ea 100644 --- a/src/api/options-data.md +++ b/src/api/options-data.md @@ -44,7 +44,7 @@ - **详细：** - props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。 + props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高阶选项，如类型检测、自定义验证和设置默认值。 你可以基于对象的语法使用以下选项： diff --git a/src/guide/a11y-standards.md b/src/guide/a11y-standards.md index eb8f70581..a896dde58 100644 --- a/src/guide/a11y-standards.md +++ b/src/guide/a11y-standards.md @@ -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/) diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md index d973a8522..04741b30c 100644 --- a/src/guide/component-edge-cases.md +++ b/src/guide/component-edge-cases.md @@ -9,11 +9,11 @@ ## 控制更新 -感谢 Vue 的反应系统，它总是知道什么时候更新 (如果你使用正确的话)。但是，在某些边缘情况下，你可能希望强制更新，尽管事实上没有任何反应性数据发生更改。还有一些情况下，你可能希望防止不必要的更新。 +得益于其响应式系统，Vue 总是知道何时更新（如果你使用正确的话）。但是，在某些边缘情况下，你可能希望强制更新，尽管事实上没有任何响应式数据发生更改。还有一些情况下，你可能希望防止不必要的更新。 ### 强制更新 -如果你发现自己需要在 Vue 中强制更新，在 99.99%的情况下，你在某个地方犯了错误。例如，你可能依赖于 Vue 反应性系统未跟踪的状态，例如，在组件创建之后添加了 `data` 属性。 +如果你发现自己需要在 Vue 中强制更新，在 99.99%的情况下，你在某个地方犯了错误。例如，你可能依赖于 Vue 响应式系统未跟踪的状态，例如，在组件创建之后添加了 `data` 属性。 但是，如果你已经排除了上述情况，并且发现自己处于这种非常罕见的情况下，必须手动强制更新，那么你可以使用 [`$forceUpdate`](../api/instance-methods.html#forceupdate)。 diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md index 54d6c6a45..3e4042dad 100644 --- a/src/guide/component-provide-inject.md +++ b/src/guide/component-provide-inject.md @@ -97,7 +97,7 @@ app.component('todo-list', { ## 与响应式一起工作 -在上面的例子中，如果我们更改了 `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', { diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index eb3d3d958..bcbb2420a 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -256,7 +256,7 @@ setup (props) { } ``` -现在我们需要对 `user` prop 所做的更改做出反应。为此，我们将使用独立的 `watch` 函数。 +现在我们需要对 `user` prop 所做的更改做出响应。为此，我们将使用独立的 `watch` 函数。 ### `watch` 响应式更改 @@ -328,7 +328,7 @@ setup (props) { } ``` -你可能已经注意到在我们的 `setup` 的顶部使用了 `toRefs`。这是为了确保我们的侦听器能够对 `user` prop 所做的更改做出反应。 +你可能已经注意到在我们的 `setup` 的顶部使用了 `toRefs`。这是为了确保我们的侦听器能够对 `user` prop 所做的更改做出响应。 有了这些变化，我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作—基于 `searchQuery` 进行过滤，这次是使用计算属性。 diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index cb414fdbe..8de248c57 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -32,7 +32,7 @@ export default { ``` :::warning -但是，因为 `props` 是响应性的，你不能**使用 ES6 解构**，因为它会消除 prop 的反应性。 +但是，因为 `props` 是响应性的，你不能**使用 ES6 解构**，因为它会消除 prop 的响应性。 ::: 如果需要销毁 prop，可以通过使用 `setup` 函数中的 [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) 来安全地完成此操作。 diff --git a/src/guide/computed.md b/src/guide/computed.md index bcdf46ff8..1f4bfe14f 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -100,7 +100,7 @@ methods: { } ``` -我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是**计算属性是基于它们的反应依赖关系缓存的**。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `author.books` 还没有发生改变，多次访问 `publishedBookMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。 +我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是**计算属性是基于它们的响应式依赖关系缓存的**。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `author.books` 还没有发生改变，多次访问 `publishedBookMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。 这也同样意味着下面的计算属性将不再更新，因为 Date.now () 不是响应式依赖： diff --git a/src/guide/contributing/writing-guide.md b/src/guide/contributing/writing-guide.md index 848b3e99e..647b6c34b 100644 --- a/src/guide/contributing/writing-guide.md +++ b/src/guide/contributing/writing-guide.md @@ -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**：提供功能的完整列表，包括类型信息，每个要解决的问题的描述，选项的每种组合的示例以及指向指南，食谱的食谱以及提供更多详细信息的其他内部资源的链接。与其他页面不同，此页面无意自上而下阅读，因此可以提供大量详细信息。这些参考资料还必须比指南更容易浏览，因此格式应比指南的讲故事格式更接近字典条目。 - **迁移**： - **版本**：当进行了重要的更改时，包含一个完整的更改列表是很有用的，包括对为什么进行更改以及如何迁移其项目的详细解释。 @@ -51,7 +51,7 @@ - **几乎总是避免幽默 (对于英文文档)**， 尤其是讽刺和通俗文化的引用，因为它在不同文化之间的翻译并不好。 -- **永远不要假设比你必须的更高级的上下文**。 +- **永远不要假设比你必须的更高阶的上下文**。 - **在大多数情况下，比起在多个部分中重复相同的内容，更喜欢在文档的各个部分之间建立链接**。在内容上有些重复是不可避免的，甚至是学习的必要条件。然而，过多的重复也会使文档更难维护，因为 API 的更改将需要在许多地方进行更改，而且很容易遗漏某些内容。这是一个很难达到的平衡。 - **具体的比一般的好**例如，一个 `` 组件例子比 `` 更好。 - **相对胜于晦涩**。例如，一个 `` 组件例子比 `` 更好。 diff --git a/src/guide/events.md b/src/guide/events.md index b4a951d61..0d1d115ad 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -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 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。 diff --git a/src/guide/installation.md b/src/guide/installation.md index f7c49dab1..1e6c40dec 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -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) 上找到。 diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 283a515fd..480b1af2b 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -350,4 +350,4 @@ app.mount('#todo-list-app') ## 准备好了吗？ -我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能，所以请务必读完整个教程！ +我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能，所以请务必读完整个教程！ diff --git a/src/guide/migration/async-components.md b/src/guide/migration/async-components.md index 6c05bfe9f..954ba7911 100644 --- a/src/guide/migration/async-components.md +++ b/src/guide/migration/async-components.md @@ -23,7 +23,7 @@ badges: const asyncPage = () => import('./NextPage.vue') ``` -或者，对于带有选项的更高级组件语法： +或者，对于带有选项的更高阶组件语法： ```js const asyncPage = { diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index f42e33e2a..56bcb3759 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -4,7 +4,7 @@ 很高兴你这么问！答案是不。我们已经尽了很大的努力来确保大部分 API 是相同的，核心概念没有改变。它很长，因为我们喜欢提供非常详细的解释和包括很多例子。放心。**这不是你必须从头开始阅读的东西** -我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html)，这完全是附加的-前面的选项 API 将继续受到支持，因为组合 API 是一个高级特性。 +我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html)，这完全是附加的-前面的选项 API 将继续受到支持，因为组合 API 是一个高阶特性。 ## 概览 @@ -59,7 +59,7 @@ Vue 3 中需要关注的一些新功能包括： > 迁移助手仍在开发中 -1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高级 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能，他们会让你知道，提供建议，并提供更多信息的链接。 +1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高阶 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能，他们会让你知道，提供建议，并提供更多信息的链接。 2. 之后，在侧边栏中浏览此页面的目录。如果你看到一个可能会影响你的主题，但是迁移帮助程序没有捕捉到，请查看它。 diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 547576a65..060d00d3d 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -48,7 +48,7 @@ export default { } ``` -## render 函数签名更改 +## 渲染函数签名更改 ### 2.x 语法 diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md index b0f720a42..102b5b82e 100644 --- a/src/guide/migration/slots-unification.md +++ b/src/guide/migration/slots-unification.md @@ -18,7 +18,7 @@ badges: ## 2.x 语法 -当使用 render 函数时，即 `h`，2.x 用于在内容节点上定义 `slot` data property。 +当使用渲染函数时，即 `h`，2.x 用于在内容节点上定义 `slot` data property。 ```js // 2.x 语法 diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 2d3cbb5f5..190fa8ce8 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -32,7 +32,7 @@ console.log(count.value) // 0 ## `watchEffect` -为了根据反应状态*自动应用*和*重新应用*副作用，我们可以使用 `watchEffect` 方法。它立即运行一个函数，同时反应性地跟踪其依赖项，并在依赖项发生更改时重新运行它。 +为了根据响应式状态*自动应用*和*重新应用*副作用，我们可以使用 `watchEffect` 方法。它立即运行一个函数，同时响应式地跟踪其依赖项，并在依赖项发生更改时重新运行它。 ```js const count = ref(0) @@ -46,11 +46,11 @@ setTimeout(() => { }, 100) ``` -### 阻止侦听器 +### 停止侦听 -当在组件的 [setup ()](composition-api-setup.html) 函数或[生命周期钩子](composition-api-lifecycle-hooks.html)期间调用 `watchEffect` 时，侦听器链接到组件的生命周期，并在组件卸载时自动停止。 +当 `watchEffect` 在组件的 [setup()](composition-api-setup.html) 函数或[生命周期钩子](composition-api-lifecycle-hooks.html)被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。 -在其他情况下，它返回一个停止句柄，可以调用该句柄显式停止侦听器： +在一些情况下，也可以显式调用返回值以停止侦听： ```js const stop = watchEffect(() => { @@ -61,12 +61,12 @@ const stop = watchEffect(() => { stop() ``` -### 副作用失效 +### 清除副作用 -有时侦听效果函数会执行异步副作用，当它失效时 (即在效果完成之前状态改变) 需要清除这些副作用。effect 函数接收一个 `onInvalidate` 函数，该函数可用于注册无效回调。此无效回调在以下情况下调用： +有时副作用函数会执行一些异步的副作用, 这些响应需要在其失效时清除（即完成之前状态已改变了）。所以侦听副作用传入的函数可以接收一个 `onInvalidate` 函数作入参, 用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发: -- 效果将重新运行 -- 侦听器被停止 (即，当组件卸载时，如果在 `setup()` 或生命周期钩子使用了 `watchEffect`) +- 副作用即将重新执行时 +- 侦听器被停止 (如果在 `setup()` 或生命周期钩子函数中使用了 `watchEffect`，则在组件卸载时) ```js watchEffect(onInvalidate => { @@ -79,7 +79,9 @@ watchEffect(onInvalidate => { }) ``` -我们通过传入函数注册无效回调，而不是从回调返回它，因为返回值对于异步错误处理很重要。在执行数据获取时，effect 函数通常是异步函数： +我们之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。 + +在执行数据请求时，副作用函数往往是一个异步函数： ```js const data = ref(null) @@ -89,11 +91,11 @@ watchEffect(async onInvalidate => { }) ``` -异步函数隐式返回一个 Promise，但需要在 Promise 解析之前立即注册清除函数。此外，Vue 依赖于返回的 Promise 来自动处理 Promise 链中的潜在错误。 +我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。另外，Vue 依赖这个返回的 Promise 来自动处理 Promise 链上的潜在错误。 -### 效果冲刷时间 +### 副作用刷新时机 -Vue 的响应性系统缓冲无效的效果，并异步刷新它们，以避免在同一个“tick”中发生许多状态转换时不必要的重复调用。在内部，组件的 `update` 功能也是一种监视效果。当把用户效果加入队列时，它总是在所有组件 `update` 效果之后调用： +Vue 的响应式系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个 “tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中, 组件的 `update` 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时, 会在所有的组件 `update` 后执行： ```html