From fa9c7c788e3cb6ca66657a804503bf6eb27030ce Mon Sep 17 00:00:00 2001 From: hukai Date: Mon, 19 Oct 2020 11:14:06 +0800 Subject: [PATCH 1/3] docs: src/guide/data-methods.md --- src/guide/data-methods.md | 44 +++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index 179889d88..4615b33bc 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -1,10 +1,8 @@ - +# Data 属性和方法 -# Data Properties and Methods +## Data 属性 -## Data Properties - -The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance: +组件的 `data` 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 把这个对象包装到响应性系统中，并以 `$data` 的形式存储在组件实例中。为方便起见，该对象的任何顶级属性也直接通过组件实例暴露出来： ```js const app = Vue.createApp({ @@ -18,24 +16,24 @@ const vm = app.mount('#app') console.log(vm.$data.count) // => 4 console.log(vm.count) // => 4 -// Assigning a value to vm.count will also update $data.count +// 修改 vm.count 的值也会更新 $data.count vm.count = 5 console.log(vm.$data.count) // => 5 -// ... and vice-versa +// 反之亦然 vm.$data.count = 6 console.log(vm.count) // => 6 ``` -These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available. +这些实例属性仅在首次创建实例时添加，所以你需要确保它们都在 `data` 函数返回的对象中。必要时，对尚未提供所需值的属性使用 `null`、`undefined` 或其他占位符值。 -It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html). +可以将新的 property 直接添加到组件实例，而不包含在 `data` 中。但是，由于响应式 `$data` 对象不支持该 property，所以 [Vue 的响应性系统](reactivity.html) 不会自动跟踪它。 -Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters. +Vue 使用 `$` 前缀通过组件实例暴露自己的内置 API。它还为内部属性保留 `_` 前缀。你应该避免使用这两个字符开头的的顶级 `data` 属性名称。 -## Methods +## 方法 -To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods: +用 `methods` 选项向组件实例添加方法，`methods` 应该是一个包含所需方法的对象： ```js const app = Vue.createApp({ @@ -44,7 +42,7 @@ const app = Vue.createApp({ }, methods: { increment() { - // `this` will refer to the component instance + // `this` 指向该组件实例 this.count++ } } @@ -59,17 +57,17 @@ vm.increment() console.log(vm.count) // => 5 ``` -Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value. +Vue 自动为 `methods` 绑定 `this`，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 `this` 指向。在定义 `methods` 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 `this` 指向。 -Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners: +和组件实例的其他所有属性一样，可以从组件的模板中访问 `methods`。在模板中，它们通常被当做事件监听使用： ```html ``` -In the example above, the method `increment` will be called when the ` From 8143ca51e01f13130bb12dab4517360743dc19ac Mon Sep 17 00:00:00 2001 From: hukai Date: Mon, 26 Oct 2020 09:00:19 +0800 Subject: [PATCH 3/3] update src/guide/data-methods.md --- src/guide/data-methods.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index 214d0ead5..fef5881f9 100644 --- a/src/guide/data-methods.md +++ b/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 ``` -在上面的例子中，点击 `