Merge pull request #71 from ajycc20/master

fix: update compositon-api-introduction.md

src/guide/change-detection.md

@@ -2,11 +2,11 @@
 
 > 该页面仅适用于 Vue 2.x 及更低版本，并假定你已经阅读了[响应式部分](reactivity.md)。请先阅读该部分。
 
-由于 JavaScript 的限制，有些 Vue **无法检测**的更改类型。但是，有一些方法可以规避它们以维持响应式。
+由于 JavaScript 的限制，有些 Vue **无法检测**的更改类型。但是，有一些方法可以规避它们以维持响应性。
 
 ### 对于对象
 
-Vue 无法检测到 property 的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此必须在 data 对象中存在一个 property，以便 Vue 对其进行转换并使其具有响应式。例如：
+Vue 无法检测到 property 的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此必须在 `data` 对象中存在一个 property，以便 Vue 对其进行转换并使其具有响应式。例如：
 
 ```js
 var vm = new Vue({
@@ -20,7 +20,7 @@ vm.b = 2
 // `vm.b` 不是响应式的
 ```
 
-对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object，propertyName，value) 方法向嵌套对象添加响应式 property。例如，对于：
+对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 `Vue.set(object，propertyName，value)` 方法向嵌套对象添加响应式 property：
 
 ```js
 Vue.set(vm.someObject, 'b', 2)
@@ -54,11 +54,11 @@ var vm = new Vue({
     items: ['a', 'b', 'c']
   }
 })
-vm.items[1] = 'x' // 不是响应性的
-vm.items.length = 2 // 不是响应性的
+vm.items[1] = 'x' // 不是响应式的
+vm.items.length = 2 // 不是响应式的
 ```
 
-为了解决第一种问题，以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果，同时也将在响应式系统内触发状态更新：
+为了解决第一种问题，以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果，同时也将在响应性系统内触发状态更新：
 
 
 ```js

src/guide/composition-api-introduction.md

@@ -3,7 +3,7 @@
 ## 什么是 Composition API？
 
 :::tip 提示
-在阅读文档之前，你应该已经熟悉了这两个 [Vue 基础] ((introduction.md) 和[创建组件](component-basics.md)。
+在阅读文档之前，你应该已经熟悉了这两个 [Vue 基础](introduction.md) 和[创建组件](component-basics.md)。
 :::
 
 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。
@@ -63,7 +63,7 @@ export default {
 
 ## Composition API 基础
 
-既然我们知道了**为什么**，我们就可以开始**如何**。为了开始使用 Composition api，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 `setup`。
+既然我们知道了**为什么**，我们就可以知道**怎么做**。为了开始使用 Composition api，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 `setup`。
 
 ### `setup` 组件选项
 
@@ -73,7 +73,7 @@ export default {
 由于在执行 `setup` 时尚未创建组件实例，因此在 `setup` 选项中没有 `this`。这意味着，除了 `props` 之外，你将无法访问组件中声明的任何属性——**本地状态**、**计算属性**或**方法**。
 :::
 
-`setup` 选项应该是一个接受 `props` 和 `context` 的函数，我们将在[稍后](composition-api-setup.html#arguments)讨论。此外，我们从 `setup` 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
+`setup` 选项应该是一个接受 `props` 和 `context` 的函数，我们将在[稍后](composition-api-setup.html#参数)讨论。此外，我们从 `setup` 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
 
 让我们添加 `setup` 到我们的组件中：
 
@@ -178,7 +178,7 @@ setup (props) {
 }
 ```
 
-完成！现在，每当我们调用 `getUserRepositories`、`repositories` 时都将发生变化，视图将更新以反映更改。我们的组件现在应该如下所示：
+完成！现在，每当我们调用 `getUserRepositories` 时，`repositories` 都将发生变化，视图将更新以反映更改。我们的组件现在应该如下所示：
 
 ```js
 // src/components/UserRepositories.vue
@@ -277,9 +277,9 @@ watch(counter, (newValue, oldValue) => {
 })
 ```
 
-例如，每当 `counter` 被修改时 `counter.value=5`，watch 将触发并执行回调 (第二个参数)，在本例中，它将把 `The new counter value is:5` 记录到我们的控制台中。
+例如，每当 `counter` 被修改时 `counter.value=5`，watch 将触发并执行回调 (第二个参数)，在本例中，它将把 `'The new counter value is:5'` 记录到我们的控制台中。
 
-**以下是选项 API 等效：**
+**以下是等效的选项 API ：**
 
 ```js
 export default {
@@ -296,7 +296,7 @@ export default {
 }
 ```
 
-有关 `watch` 的详细信息，请参阅我们的[深入指南] ()。
+有关 `watch` 的详细信息，请参阅我们的[深入指南](composition-api-introduction.html)。
 
 **现在我们将其应用到我们的示例中：**
 
@@ -330,7 +330,7 @@ setup (props) {
 
 你可能已经注意到在我们的 `setup` 的顶部使用了 `toRefs`。这是为了确保我们的侦听器能够对 `user` prop 所做的更改做出反应。
 
-有了这些变化，我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作—基于 `searchQuery` 进行过滤，这次是使用计算属性。
+有了这些变化，我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作——基于 `searchQuery` 进行过滤，这次是使用计算属性。
 
 ### 独立的 `computed` 属性
 
@@ -347,7 +347,7 @@ console.log(counter.value) // 1
 console.log(twiceTheCounter.value) // 2
 ```
 
-在这里，`computed` 函数返回一个作为 `computed` 的第一个参数传递的 getter 类回调的输出的一个*只读*的“响应式引用”。为了访问新创建的计算变量的 **value**，我们需要像使用 `ref` 一样使用 `.value` property。
+在这里，`computed` 函数返回一个作为 `computed` 的第一个参数传递的 getter 类回调的输出的一个*只读*的**响应式引用**。为了访问新创建的计算变量的 **value**，我们需要像使用 `ref` 一样使用 `.value` property。
 
 让我们将搜索功能移到 `setup` 中：
 
@@ -388,7 +388,7 @@ setup (props) {
 }
 ```
 
-对于其他的**逻辑关注点**我们也可以这样做，但是你可能已经在问这个问题了——*这不就是把代码移到“setup”选项并使它变得非常大吗？*嗯，那是真的。这就是为什么在继续其他任务之前，我们将首先将上述代码提取到一个独立的**组合函数**。让我们从创建 `useUserRepositories` 开始：
+对于其他的**逻辑关注点**我们也可以这样做，但是你可能已经在问这个问题了——*这不就是把代码移到 `setup` 选项并使它变得非常大吗*？嗯，那是真的。这就是为什么在继续其他任务之前，我们将首先将上述代码提取到一个独立的**组合函数**。让我们从创建 `useUserRepositories` 开始：
 
 ```js
 // src/composables/useUserRepositories.js

src/guide/composition-api-provide-inject.md

@@ -6,7 +6,7 @@
 
 ## 设想场景
 
-Let's assume that we want to rewrite the following code，which contains a `MyMap` component that provides a `MyMarker` component with the user's location，using the Composition API。
+假设我们要重写以下代码，其中包含一个 `MyMap` 组件，该组件使用 Composition API 为 `MyMarker` 组件提供用户的位置。
 
 ```vue
 <!-- src/components/MyMap.vue -->
@@ -50,7 +50,7 @@ export default {
 1. property 的 name (`<String>` 类型)
 2. property 的 value
 
-使用 `MyMap` 组件，我们提供的值可以重构如下：
+使用 `MyMap` 组件，我们提供的值可以按如下方式重构：
 
 ```vue{7,14-20}
 <!-- src/components/MyMap.vue -->
@@ -107,11 +107,11 @@ export default {
 </script>
 ```
 
-## 响应式
+## 响应性
 
-### 添加响应式
+### 添加响应性
 
-为了增加提供值和注入值之间的响应式，我们可以使用 [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) 或 [reactive](reactivity-fundamentals.html#declaring-reactive-state) 提供值时。
+为了增加提供值和注入值之间的响应性，我们可以使用 [ref](reactivity-fundamentals.html#创建独立的响应式值作为-refs) 或 [reactive](reactivity-fundamentals.html#声明响应式状态) 提供值时。
 
 使用 `MyMap` 组件，我们的代码可以更新如下：
 
@@ -246,7 +246,7 @@ export default {
 </script>
 ```
 
-最后，如果要确保通过 `provide` 传递的数据不会被注入的组件更改，我们建议对提供者 property 使用` readonly。
+最后，如果要确保通过 `provide` 传递的数据不会被注入的组件更改，我们建议对提供者 property 使用 `readonly`。
 
 ```vue{7,25-26}
 <!-- src/components/MyMap.vue -->

src/guide/composition-api-setup.md

@@ -32,10 +32,10 @@ export default {
 ```
 
 :::warning
-但是，因为 `props` 是响应式的，你不能**使用 ES6 解构**，因为它会消除 prop 的响应性。
+但是，因为 `props` 是响应式的，你**不能使用 ES6 解构**，因为它会消除 prop 的响应性。
 :::
 
-如果需要销毁 prop，可以通过使用 `setup` 函数中的 [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) 来安全地完成此操作。
+如果需要销毁 prop，可以通过使用 `setup` 函数中的 [toRefs](reactivity-fundamentals.html#响应式状态解构) 来安全地完成此操作。
 
 ```js
 // MyBook.vue
@@ -92,15 +92,15 @@ export default {
 - `slots`
 - `emit`
 
-换句话说，你**将无法**访问以下组件选项：
+换句话说，你**将无法访问**以下组件选项：
 
 - `data`
 - `computed`
 - `methods`
 
 ## 使用模板
 
-如果 `setup` 返回一个对象，则可以在组件的模板中访问该对象的 property：
+如果 `setup` 返回一个对象，则可以在组件的模板中访问该对象的 property，以及传递给 `setup` 的 `props` property：
 
 ```vue-html
 <!-- MyBook.vue -->
@@ -126,7 +126,7 @@ export default {
 </script>
 ```
 
-注意，从 `setup` 返回的 [refs](../api/refs-api.html#ref) 在模板中访问时是 [automatically unwrapped](../api/refs-api.html#access-in-templates)，因此不应在模板中使用 `.value`。
+注意，从 `setup` 返回的 [refs](../api/refs-api.html#ref) 在模板中访问时是 [Ref 展开](/guide/reactivity-fundamentals.html#ref-展开)，因此不应在模板中使用 `.value`。
 
 
 ## 使用渲染函数

src/guide/composition-api-template-refs.md

@@ -35,7 +35,7 @@
 
 作为模板使用的 ref 的行为与任何其他 ref 一样：它们是响应式的，可以传递到 (或从) 复合函数中返回。
 
-### Usage with JSX
+### JSX的用法
 
 ```js
 export default {
@@ -55,7 +55,7 @@ export default {
 
 ### 内部使用 `v-for`
 
-Composition API 模板引用在 `-for` 内部使用时没有特殊处理。相反，请使用函数引用执行自定义处理：
+Composition API 模板引用在 `v-for` 内部使用时没有特殊处理。相反，请使用函数引用执行自定义处理：
 
 ```html
 <template>