Merge pull request #3 from vuejs/master

update repo

Author: Aaron

src/api/application-api.md

@@ -223,11 +223,11 @@ app.mount('#my-app')
 
 - **用法：**
 
-  设置一个可以被注入到应用范围内所有组件中的值。组件应该使用 `inject` 来接收提供的值。
+  设置一个可以被注入到应用范围内所有组件中的值。组件应该使用 `inject` 来接收 provide 的值。
 
   从 `provide`/`inject` 的角度来看，可以将应用程序视为根级别的祖先，而根组件是其唯一的子级。
 
-  该方法不应该与 [provide 组件选项](options-composition.html#provide-inject)或组合式 API 中的 [provide 方法](composition-api.html#provide-inject)混淆。虽然它们也是相同的 `provide`/`inject` 机制的一部分，但是是用来配置组件提供的值而不是应用提供的值。
+  该方法不应该与 [provide 组件选项](options-composition.html#provide-inject)或组合式 API 中的 [provide 方法](composition-api.html#provide-inject)混淆。虽然它们也是相同的 `provide`/`inject` 机制的一部分，但是是用来配置组件 provide 的值而不是应用 provide 的值。
 
   通过应用提供值在写插件时尤其有用，因为插件一般不能使用组件提供值。这是使用 [globalProperties](application-config.html#globalProperties) 的替代选择。
 

src/api/composition-api.md

@@ -145,7 +145,7 @@ function inject<T>(
 ): T
 ```
 
-Vue 提供了一个 `InjectionKey` 接口，该接口是扩展 `Symbol` 的泛型类型。它可用于在提供者和消费者之间同步注入值的类型：
+Vue 提供了一个 `InjectionKey` 接口，该接口是扩展 `Symbol` 的泛型类型。它可用于在提供者和消费者之间同步 inject 值的类型：
 
 ```ts
 import { InjectionKey, provide, inject } from 'vue'
@@ -157,7 +157,7 @@ provide(key, 'foo') // 提供非字符串值将导致错误
 const foo = inject(key) // foo 的类型: string | undefined
 ```
 
-如果使用字符串 key 或非类型化 symbols，则需要显式声明注入值的类型：
+如果使用字符串 key 或非类型化 symbols，则需要显式声明 inject 值的类型：
 
 ```ts
 const foo = inject<string>('foo') // string | undefined

src/api/options-composition.md

@@ -71,7 +71,7 @@
 
   - 一个字符串数组，或
   - 一个对象，对象的 key 是本地的绑定名，value 是：
-    - 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
+    - 在可用注入内容中搜索用的 key (字符串或 Symbol)，或
     - 一个对象，该对象的：
       - `from` property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
       - `default` property 是降级情况下使用的 value
@@ -81,15 +81,15 @@
 - **示例：**
 
   ```js
-  // 父级组件提供 'foo'
+  // 父级组件 provide  'foo'
   const Provider = {
     provide: {
       foo: 'bar'
     }
     // ...
   }
 
-  // 子组件注入 'foo'
+  // 子组件 inject  'foo'
   const Child = {
     inject: ['foo'],
     created() {
@@ -118,7 +118,7 @@
   }
   ```
 
-  使用一个注入的值作为一个 property 的默认值：
+  使用一个 inject 的值作为一个 property 的默认值：
 
   ```js
   const Child = {
@@ -133,7 +133,7 @@
   }
   ```
 
-  使用一个注入的值作为数据入口：
+  使用一个 inject 的值作为数据入口：
 
   ```js
   const Child = {
@@ -146,7 +146,7 @@
   }
   ```
 
-  注入可以通过设置默认值使其变成可选项：
+  Inject 可以通过设置默认值使其变成可选项：
 
   ```js
   const Child = {

src/api/refs-api.md

@@ -133,7 +133,7 @@ function useFeatureX() {
 
 export default {
   setup() {
-    // 可以在不失去响应性的情况下破坏结构
+    // 可以在不失去响应性的情况下解构
     const { foo, bar } = useFeatureX()
 
     return {
@@ -221,7 +221,7 @@ isReactive(foo.value) // false
 
 ## `triggerRef`
 
-手动执行与 `shallowRef`](#shallowref) 关联的任何效果。
+手动执行与 [`shallowRef`](#shallowref) 关联的任何副作用。
 
 ```js
 const shallow = shallowRef({

src/cookbook/debugging-in-vscode.md

@@ -1,31 +1,29 @@
-<!-- TODO: translation -->
+# 在 VS Code 中调试
 
-# Debugging in VS Code
+每个应用，不论大小，都需要理解程序是为何运行失败的。在本案例中，我们会探索一些 VS Code 用户在浏览器中调试应用的工作流程。
 
-Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.
+这个案例展示了如何在 VS Code 中调试浏览器中运行的通过 [Vue CLI](https://github.com/vuejs/vue-cli) 生成的 Vue.js 应用。
 
-This recipe shows how to debug [Vue CLI](https://github.com/vuejs/vue-cli) applications in VS Code as they run in the browser.
+## 先决条件
 
-## Prerequisites
-
-Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled:
+请确保你安装了 VS Code 以及适合的浏览器，并且安装激活了最新版的相应的 Debugger 扩展：
 
 - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
 - [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)
 
-Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), following the instructions in the [Vue CLI Guide](https://cli.vuejs.org/). Change into the newly created application directory and open VS Code.
+请通过 [vue-cli](https://github.com/vuejs/vue-cli)，遵循它的 [Vue CLI 教程](https://cli.vuejs.org/)并创建一个项目。然后进入这个新创建的应用的目录，打开 VS Code。
 
-### Displaying Source Code in the Browser
+### 在浏览器中展示源代码
 
-Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.
+在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 Webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 Webpack 优化过了也没关系。
 
-If you use Vue CLI 2, set or update the `devtool` property inside `config/index.js`:
+如果你使用的是 Vue CLI 2，请设置并更新 `config/index.js` 内的 `devtool` property：
 
 ```json
 devtool: 'source-map',
 ```
 
-If you use Vue CLI 3, set or update the `devtool` property inside `vue.config.js`:
+如果你使用的是 Vue CLI 3，请设置并更新 `vue.config.js` 内的 `devtool` property：
 
 ```js
 module.exports = {
@@ -35,15 +33,15 @@ module.exports = {
 }
 ```
 
-### Launching the Application from VS Code
+### 从 VS Code 启动应用
 
 ::: info
-We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.
+我们这里假设端口号为 `8080`。如果与实际情况不符 (比如 `8080` 端口已经被占用且 Vue CLI 为你自动选取了另一个端口号)，可以修改相应的配置。
 :::
 
-Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration:
+点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 **Chrome/Firefox: Launch** 环境。然后将生成的 launch.json 的内容替换成为相应的配置：
 
-![Add Chrome Configuration](/images/config_add.png)
+![添加 Chrome 配置](/images/config_add.png)
 
 ```json
 {
@@ -72,37 +70,37 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
 }
 ```
 
-## Setting a Breakpoint
+## 设置一个断点
 
-1.  Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
+1.  在 **src/components/HelloWorld.vue** 的 `line 90` 的地方设置一个断点，这里的 `data` 函数返回一个字符串。
 
-![Breakpoint Renderer](/images/breakpoint_set.png)
+![断点渲染器](/images/breakpoint_set.png)
 
-2.  Open your favorite terminal at the root folder and serve the app using Vue CLI:
+2.  在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用：
 
 ```
 npm run serve
 ```
 
-3.  Go to the Debug view, select the **'vuejs: chrome/firefox'** configuration, then press F5 or click the green play button.
+3.  来到 Debug 视图，选择 **“vuejs: chrome/firefox”** 配置，然后按 F5 或点击那个绿色的 play 按钮。
 
-4.  Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`.
+4.  随着一个新的浏览器实例打开 `http://localhost:8080`，你的断点现在应该被命中了。
 
-![Breakpoint Hit](/images/breakpoint_hit.png)
+![命中断点](/images/breakpoint_hit.png)
 
-## Alternative Patterns
+## 替代方案
 
 ### Vue Devtools
 
-There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
+我们还有一些其它的调试方法，复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)和 [Firefox 版本](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)的 Vue.js devtools。使用 devtools 有很多好处，比如它可以让你能够实时编辑数据 property 并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。
 
 ![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)
 
-Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.
+请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接)，devtools 的审查功能是默认被禁用的，所以 Vue 面板不会出现。如果你切换到一个非压缩版本，你可能需要强制刷新该页面来看到它。
 
-### Simple Debugger Statement
+### 简单的 debugger 语句
 
-The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.
+上述示例的工作流程非常好。不过这里还有一个替代选项，就是你可以直接在代码中使用[原生的 debugger 语句](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger)。如果你选择了这种方式，请千万记得当你调试完毕之后把这个语句移除。
 
 ```js
 <script>
@@ -121,6 +119,6 @@ export default {
 </script>
 ```
 
-## Acknowledgements
+## 致谢
 
-This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli).
+这个案例是基于 [Kenneth Auchenberg](https://twitter.com/auchenberg) 贡献的，[可在此](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli) 阅读。

src/cookbook/index.md

@@ -42,7 +42,7 @@ Cookbook 为开发者提供了一些示例，涵盖常见的或有趣的用例
 3. 显示一小段代码示例。
 4. 用一句话解释它完成了什么。
 
-### 关于其价值的细节 <Badge text="必要的" type="error" />
+### 关于其值的细节 <Badge text="必要的" type="error" />
 
 1. 解决人们在看例子时可能遇到的常见问题。(最好以块引用格式呈现)
 2. 显示常见错误的例子，以及如何避免它们。

src/guide/component-basics.md

@@ -39,7 +39,7 @@ app.mount('#components-demo')
 ```
 <common-codepen-snippet title="Component basics" slug="abORVEJ" tab="js,result" :preview="false" />
 
-因为组件是可复用的组件实例，所以它们与根实例接收相同的选项，例如 `data`、`computed`、`watch`、`methods` 以及生命周期钩子等。仅有的例外是像 `el` 这样根实例特有的选项。
+因为组件是可复用的组件实例，所以它们与根实例接收相同的选项，例如 `data`、`computed`、`watch`、`methods` 以及生命周期钩子等。
 
 ## 组件的复用
 
@@ -55,7 +55,7 @@ app.mount('#components-demo')
 
 <common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="html,result" :preview="false" />
 
-注意当点击按钮时，每个组件都会各自独立维护它的 `count`。因为你每用一次组件，就会有一个它的**新实例**被创建。
+注意当点击按钮时，每个组件都会各自独立维护它的 `count`。因为你每用一次组件，就会有一个它的新**实例**被创建。
 
 ## 组件的组织
 
@@ -83,7 +83,7 @@ app.component('my-component-name', {
 
 早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。
 
-Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 `prop` 列表中：
+Prop 是你可以在组件上注册的一些自定义 attribute。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 `prop` 列表中：
 
 ```js
 const app = Vue.createApp({})
@@ -289,7 +289,7 @@ methods: {
 ```
 
 ::: warning
-请注意，我们在这里使用的是 `model value`，因为我们使用的是 DOM 模板中的 kebab-case。你可以在 [DOM Template Parsing Caveats](#dom-template-parsing-caveats) 部分找到关于 kebab cased 和 camelCased 属性的详细说明
+请注意，我们在这里使用的是 `model-value`，因为我们使用的是 DOM 模板中的 kebab-case。你可以在 [DOM Template Parsing Caveats](#dom-template-parsing-caveats) 部分找到关于 kebab cased 和 camelCased 属性的详细说明
 :::
 
 为了让它正常工作，这个组件内的 `<input>` 必须：
@@ -396,7 +396,7 @@ app.component('alert-box', {
 
 你可以在[这里](https://codepen.io/team/Vue/pen/oNXaoKy)查阅并体验完整的代码，或在[这个版本](https://codepen.io/team/Vue/pen/oNXapXM)了解绑定组件选项对象，而不是已注册组件名的示例。
 
-请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute **都会作为 DOM attribute 被绑定**。对于像 `value` 这样的 property，若想让其如预期般工作，你需要使用 [.prop 修饰器](../api/directives.html#v-bind)。
+你也可以使用 `is` attribute 来创建常规的 HTML 元素。
 
 到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把[动态 & 异步组件](./components-dynamic-async.html)读完。
 

src/guide/component-provide-inject.md

@@ -1,10 +1,10 @@
-# 提供 / 注入
+# Provide / Inject
 
 > 该页面假设你已经阅读过了[组件基础](component-basics.md)。如果你还对组件不太了解，推荐你先阅读它。
 
 通常，当我们需要将数据从父组件传递到子组件时，我们使用 [props](component-props.md)。想象一下这样的结构：你有一些深嵌套的组件，而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下，你仍然需要将 prop 传递到整个组件链中，这可能会很烦人。
 
-对于这种情况，我们可以使用 `provide` 和 `inject` 对。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 `provide` 选项来提供数据，子组件有一个 `inject` 选项来开始使用这个数据。
+对于这种情况，我们可以使用一对 `provide` 和 `inject`。父组件可以作为其所有子组件的依赖项提供函数，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 `provide` 选项来提供数据，子组件有一个 `inject` 选项来开始使用这个数据。
 
 ![Provide/inject scheme](/images/components_provide.png)
 
@@ -49,7 +49,7 @@ app.component('todo-list-statistics', {
 })
 ```
 
-但是，如果我们尝试在此处提供一些组件实例 property，则这将不起作用：
+但是，如果我们尝试在此处 provide 一些组件实例 property，则这将不起作用：
 
 ```js
 app.component('todo-list', {
@@ -59,7 +59,7 @@ app.component('todo-list', {
     }
   },
   provide: {
-    todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`
+    todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`
   },
   template: `
     ...
@@ -91,12 +91,12 @@ app.component('todo-list', {
 
 实际上，你可以将依赖注入看作是“long range props”，除了：
 
-- 父组件不需要知道哪些子组件使用它提供的 property
+- 父组件不需要知道哪些子组件使用它 provide 的 property
 - 子组件不需要知道 `inject` property 来自哪里
 
 ## 处理响应性
 
-在上面的例子中，如果我们更改了 `todos` 的列表，这个更改将不会反映在注入的 `todoLength` property 中。这是因为默认情况下，`provide/inject` 绑定*不*是被动绑定。我们可以通过将 `ref` property 或 `reactive` 对象传递给 `provide` 来更改此行为。在我们的例子中，如果我们想对祖先组件中的更改做出反应，我们需要为我们提供的 `todoLength` 分配一个组合式 API `computed` property：
+在上面的例子中，如果我们更改了 `todos` 的列表，这个更改将不会反映在 inject 的 `todoLength` property 中。这是因为默认情况下，`provide/inject` 绑定*不*是被动绑定。我们可以通过将 `ref` property 或 `reactive` 对象传递给 `provide` 来更改此行为。在我们的例子中，如果我们想对祖先组件中的更改做出反应，我们需要为我们 provide 的 `todoLength` 分配一个组合式 API `computed` property：
 
 ```js
 app.component('todo-list', {

src/guide/component-slots.md

@@ -114,7 +114,7 @@ Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 [Web C
 </button>
 ```
 
-现在当我在一个父级组件中使用 `<submit-button` > 并且不提供任何插槽内容时：
+现在当我们在一个父级组件中使用 `<submit-button` > 并且不提供任何插槽内容时：
 
 ```html
 <submit-button></submit-button>