update src/guide/data-methods.md

Author: huzhengen

src/guide/data-methods.md

@@ -2,7 +2,7 @@
 
 ## Data Property
 
-组件的 `data` 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 把这个对象包装到响应性系统中，并以 `$data` 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来：
+组件的 `data` 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 `$data` 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来：
 
 ```js
 const app = Vue.createApp({
@@ -25,15 +25,15 @@ vm.$data.count = 6
 console.log(vm.count) // => 6
 ```
 
-这些实例 property 仅在首次创建实例时添加，所以你需要确保它们都在 `data` 函数返回的对象中。必要时，对尚未提供所需值的 property 使用 `null`、`undefined` 或其他占位符值。
+这些实例 property 仅在实例首次创建时被添加，所以你需要确保它们都在 `data` 函数返回的对象中。必要时，要对尚未提供所需值的 property 使用 `null`、`undefined` 或其他占位的值。。
 
-可以将新的 property 直接添加到组件实例，而不包含在 `data` 中。但是，由于响应式 `$data` 对象不支持该 property，所以 [Vue 的响应性系统](reactivity.html) 不会自动跟踪它。
+直接将不包含在 `data` 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 `$data` 对象内，所以 [Vue 的响应性系统](reactivity.html)不会自动跟踪它。
 
 Vue 使用 `$` 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 `_` 前缀。你应该避免使用这两个字符开头的的顶级 `data` property 名称。
 
 ## 方法
 
-用 `methods` 选项向组件实例添加方法，`methods` 应该是一个包含所需方法的对象：
+我们用 `methods` 选项向组件实例添加方法，它应该是一个包含所需方法的对象：
 
 ```js
 const app = Vue.createApp({
@@ -59,15 +59,15 @@ console.log(vm.count) // => 5
 
 Vue 自动为 `methods` 绑定 `this`，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 `this` 指向。在定义 `methods` 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 `this` 指向。
 
-和组件实例的其他所有 property 一样，可以从组件的模板中访问 `methods`。在模板中，它们通常被当做事件监听使用：
+这些 `methods` 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用：
 
 ```html
 <button @click="increment">Up vote</button>
 ```
 
-在上面的例子中，点击 `<button>` 时，会调用`increment` 方法。
+在上面的例子中，点击 `<button>` 时，会调用 `increment` 方法。
 
-也可以直接从模板中调用方法。就像下一章节即将看到的，使用 [计算属性](computed.html) 更好。但是，在计算属性不可行的情况下，使用方法可能会很有用。你可以在模板支持 JavaScript 表达式的任何地方调用方法：
+也可以直接从模板中调用方法。就像下一章节即将看到的，通常换做[计算属性](computed.html)会更好。但是，在计算属性不可行的情况下，使用方法可能会很有用。你可以在模板支持 JavaScript 表达式的任何地方调用方法：
 
 ```html
 <span :title="toTitleDate(date)">
@@ -77,7 +77,7 @@ Vue 自动为 `methods` 绑定 `this`，以便于它始终指向组件实例。
 
 如果 `toTitleDate` 或 `formatDate` 访问任何响应式数据，则将其作为渲染依赖项进行跟踪，就像直接在模板中使用过一样。
 
-从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。如果你想这么做，应该使用 [生命周期钩子](instance.html#生命周期钩子)。
+从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。如果你想这么做，应该换做[生命周期钩子](instance.html#生命周期钩子)。
 
 ### 防抖和节流
 
@@ -90,30 +90,30 @@ Vue 没有内置支持防抖和节流，但可以使用 [Lodash](https://lodash.
 <script>
   Vue.createApp({
     methods: {
-      // Debouncing with Lodash
+      // 用 Lodash 的防抖函数
       click: _.debounce(function() {
-        // ... respond to click ...
+        // ... 响应点击 ...
       }, 500)
     }
   }).mount('#app')
 </script>
 ```
 
-但是，这种方法对于复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 `created` 里添加防抖函数:
+但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 `created` 里添加该防抖函数:
 
 ```js
 app.component('save-button', {
   created() {
-    // Debouncing with Lodash
+    // 用 Lodash 的防抖函数
     this.debouncedClick = _.debounce(this.click, 500)
   },
   unmounted() {
-    // Cancel the timer when the component is removed
+    // 移除组件时，取消定时器
     this.debouncedClick.cancel()
   },
   methods: {
     click() {
-      // ... respond to click ...
+      // ... 响应点击 ...
     }
   },
   template: `