Update computed.md

Author: 70data

src/guide/computed.md

@@ -14,7 +14,7 @@ order: 5
 </div>
 ```
 
-在这种情况下，模板不在简单和清晰。你不得不停留下意识到显示的是反向的`message`。这个问题在你不止一次反转message的时候变得更加糟糕。
+在这种情况下，模板不再简单和清晰。在实现反向显示 `message` 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。
 
 这就是为什么任何复杂逻辑，你都应当使用**计算属性**。
 
@@ -68,21 +68,21 @@ var vm = new Vue({
 {% endraw %}
 
 
-这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作属性 `vm.reversedMessage`的 getter。
+这里我们声明了一个计算属性 `reversedMessage` 。我们提供的函数将用作属性 `vm.reversedMessage` 的 getter 。
 
 ``` js
 console.log(vm.reversedMessage) // -> 'olleH'
 vm.message = 'Goodbye'
 console.log(vm.reversedMessage) // -> 'eybdooG'
 ```
 
-你可以打开浏览器的控制台，修改 vm。`vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
+你可以打开浏览器的控制台，修改 vm 。 `vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
 
-你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`，因此当 `vm.message` 发生改变时，依赖于 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
+你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 `vm.reversedMessage` 依赖于 `vm.message` ，因此当 `vm.message` 发生改变时，依赖于 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
 
-### Computed Caching vs Methods
+### 计算缓存 vs Methods
 
-You may have noticed we can achieve the same result by invoking a method in the expression:
+你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：
 
 ``` html
 <p>Reversed message: "{{ reverseMessage() }}"</p>
@@ -97,9 +97,9 @@ methods: {
 }
 ```
 
-Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on its dependencies.** A computed property will only re-evaluate when some of its dependencies have changed. This means as long as `message` has not changed, multiple access to the `reversedMessage` computed property will immediately return the previously computed result without having to run the function again.
+不经过计算属性，我们可以通过定义一个method来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是**计算缓存基于它的相关依赖**。计算属性只有在它的相关依赖发生改变时才会重新评估。这就意味着如果 `message` 没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的结果，而不必运行函数。
 
-This also means the following computed property will never update, because `Date.now()` is not a reactive dependency:
+这也同样意味着如下计算属性将不会更新，因为 `Date.now()` 并不会被依赖：
 
 ``` js
 computed: {
@@ -109,13 +109,13 @@ computed: {
 }
 ```
 
-In comparison, a method invocation will **always** run the function whenever a re-render happens.
+相比而言，每当重新渲染的时候，method调用**总会**运行函数。
 
-Why do we need caching? Imagine we have an expensive computed property **A**, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on **A**. Without caching, we would be executing **A**’s getter many more times than necessary! In cases where you do not want caching, use a method instead.
+我们为什么需要缓存？假设我们有一个重要的计算属性 **A** ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将执行多次 **A** 的 getter ，然而这都是不必要的！如果你不希望有缓存，请用method替代。
 
-### 计算属性 vs watch
+### 计算属性 vs Watched Property
 
-Vue.js 提供了一个方法 `$watch`，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。考虑下面例子：
+Vue.js 提供了一个方法 `$watch` ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。思考下面例子：
 
 ``` html
 <div id="demo">{{ fullName }}</div>
@@ -161,7 +161,7 @@ var vm = new Vue({
 
 ### 计算 setter
 
-计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
+计算属性默认只是 getter ，不过在需要时你也可以提供一个 setter ：
 
 ``` js
 // ...
@@ -182,13 +182,13 @@ computed: {
 // ...
 ```
 
-现在在调用 `vm.fullName = 'John Doe'` 时，setter 会被调用，`vm.firstName` 和 `vm.lastName` 也会有相应更新。
+现在在调用 `vm.fullName = 'John Doe'` 时， setter 会被调用， `vm.firstName` 和 `vm.lastName` 也会有相应更新。
 
 关于计算属性背后的原理和技术细节详见[计算属性的奥秘](http://rc.vuejs.org/guide/reactivity.html#Inside-Computed-Properties)。
 
 ## 观察 Watchers
 
-当计算属性使用在大多数场景下时，有时候也很需要一个自定义的数watcher.这是为什么Vue提供一个更通用的方法通过`watch`的设置，来反应数据的变化。在你想要执行异步操作或需要响应不断变化昂贵的数据操作时这很有用。
+当计算属性使用在大多数场景下时，有时候也很需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 `watch` 的设置，来反应数据的变化。在你想要执行异步操作或需要响应不断变化昂贵的数据操作时这很有用。
 
 例如：
 
@@ -217,20 +217,18 @@ var watchExampleVM = new Vue({
     answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
-    // whenever question changes, this function will run
+    // 如果 question 发生改变，这个函数就会运行
     question: function (newQuestion) {
       this.answer = 'Waiting for you to stop typing...'
       this.getAnswer()
     }
   },
   methods: {
-    // _.debounce is a function provided by lodash to limit how
-    // often a particularly expensive operation can be run.
-    // In this case, we want to limit how often we access
-    // yesno.wtf/api, waiting until the user has completely
-    // finished typing before making the ajax request. To learn
-    // more about the _.debounce function (and its cousin
-    // _.throttle), visit: https://lodash.com/docs#debounce
+    // _.debounce 是一个通过 lodash 限制操作频率的函数。
+    // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
+    // 一直等待直到用户发出ajax请求之前
+    // 学习更多关于 _.debounce function (and its cousin
+    // _.throttle), 参考: https://lodash.com/docs#debounce
     getAnswer: _.debounce(
       function () {
         var vm = this
@@ -247,8 +245,7 @@ var watchExampleVM = new Vue({
             vm.answer = 'Error! Could not reach the API. ' + error
           })
       },
-      // This is the number of milliseconds we wait for the
-      // user to stop typing.
+      // 这是我们为用户停止输入等待的毫秒数
       500
     )
   }
@@ -277,7 +274,7 @@ var watchExampleVM = new Vue({
     answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
-    // whenever question changes, this function will run
+    // 如果 question 发生改变，这个函数就会运行
     question: function (newQuestion) {
       this.answer = 'Waiting for you to stop typing...'
       this.getAnswer()
@@ -300,18 +297,17 @@ var watchExampleVM = new Vue({
             vm.answer = 'Error! Could not reach the API. ' + error
           })
       },
-      // This is the number of milliseconds we wait for the
-      // user to stop typing.
+      // 这是我们为用户停止输入等待的毫秒数
       500
     )
   }
 })
 </script>
 {% endraw %}
 
-在这个示例中，使用`watch`的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。
+在这个示例中，使用 `watch` 的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。
 
-关于`watch` 选项，可看API文档[vm.$watch API](/api/#vm-watch)。
+关于 `watch` 选项，可看API文档[vm.$watch API](/api/#vm-watch)。
 
 ***