diff --git a/src/guide/change-detection.md b/src/guide/change-detection.md index c7a66ae9..a7ff0345 100644 --- a/src/guide/change-detection.md +++ b/src/guide/change-detection.md @@ -1,12 +1,12 @@ -# Change Detection Caveats in Vue 2 +# Vue 2 での変更検出の注意事項 -> This page applies only to Vue 2.x and below, and assumes you've already read the [Reactivity Section](reactivity.md). Please read that section first. +> このページは Vue 2.x 以下にのみ適用され、すでに[リアクティブの探求](reactivity.md)を読んでいることが前提です。最初にそのセクションを読んでください。 -Due to limitations in JavaScript, there are types of changes that Vue **cannot detect**. However, there are ways to circumvent them to preserve reactivity. +JavaScript の制限のため、Vue は、**検出することができない**変更のタイプがあります。しかし、それらを回避しリアクティビティを維持する方法はあります。 -### For Objects +### オブジェクトに関して -Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the `data` object in order for Vue to convert it and make it reactive. For example: +Vue はプロパティの追加または削除を検出できません。Vue はインスタンスの初期化中に getter/setter の変換を行うため、全てのプロパティは Vue が変換してリアクティブにできるように `data` オブジェクトに存在しなければなりません。例えば: ```js var vm = new Vue({ @@ -14,39 +14,39 @@ var vm = new Vue({ a: 1 } }) -// `vm.a` is now reactive +// `vm.a` は今リアクティブです vm.b = 2 -// `vm.b` is NOT reactive +// `vm.b` はリアクティブでは"ありません" ``` -Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it's possible to add reactive properties to a nested object using the `Vue.set(object, propertyName, value)` method: +Vue では、すでに作成されたインスタンスに対して新しいルートレベルのリアクティブなプロパティを動的に追加することはできません。しかしながら、`Vue.set(object, propertyName, value)` メソッドを使ってネストしたオブジェクトにリアクティブなプロパティを追加することができます: ```js Vue.set(vm.someObject, 'b', 2) ``` -You can also use the `vm.$set` instance method, which is an alias to the global `Vue.set`: +`vm.$set` インスタンスメソッドを使用することもできます。これはグローバルの `Vue.set` のエイリアスです: ```js this.$set(this.someObject, 'b', 2) ``` -Sometimes you may want to assign a number of properties to an existing object, for example using `Object.assign()` or `_.extend()`. However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object: +既存のオブジェクトに複数のプロパティを割り当てたいということがあるかもしれません。例えば、`Object.assign()` や `_.extend()` を使って。しかし、オブジェクトに追加された新しいプロパティは変更をトリガしません。このような場合は、元のオブジェクトとミックスインオブジェクトの両方のプロパティを持つ新たなオブジェクトを作成してください: ```js -// instead of `Object.assign(this.someObject, { a: 1, b: 2 })` +// `Object.assign(this.someObject, { a: 1, b: 2 })` の代わり this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) ``` -### For Arrays +### 配列に関して -Vue cannot detect the following changes to an array: +Vue は、配列における次の変更は検知できません: -1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue` -2. When you modify the length of the array, e.g. `vm.items.length = newLength` +1. インデックスと一緒にアイテムを直接セットする場合、例えば `vm.items[indexOfItem] = newValue` +2. 配列の長さを変更する場合、例えば `vm.items.length = newLength` -For example: +例: ```js var vm = new Vue({ @@ -54,11 +54,11 @@ var vm = new Vue({ items: ['a', 'b', 'c'] } }) -vm.items[1] = 'x' // is NOT reactive -vm.items.length = 2 // is NOT reactive +vm.items[1] = 'x' // リアクティブでは"ありません" +vm.items.length = 2 // リアクティブでは"ありません" ``` -To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system: +注意事項 1 を克服するに、次のいずれも `vm.items[indexOfItem] = newValue` と同じように機能しますが、リアクティビティシステムで状態の更新をトリガします: ```js // Vue.set @@ -70,43 +70,43 @@ Vue.set(vm.items, indexOfItem, newValue) vm.items.splice(indexOfItem, 1, newValue) ``` -You can also use the [`vm.$set`](https://vuejs.org/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`: +また、[`vm.$set`](https://vuejs.org/v2/api/#vm-set) インスタンスメソッドを使うこともできます。これはグローバルな `Vue.set` のエイリアスです: ```js vm.$set(vm.items, indexOfItem, newValue) ``` -To deal with caveat 2, you can use `splice`: +注意事項 2 に対応するには、`splice` を使うことができます: ```js vm.items.splice(newLength) ``` -## Declaring Reactive Properties +## リアクティブプロパティの宣言 -Since Vue doesn't allow dynamically adding root-level reactive properties, you have to initialize component instances by declaring all root-level reactive data properties upfront, even with an empty value: +Vue では新しいルートレベルのリアクティブなプロパティを動的に追加することはできないため、インスタンスの初期化時に前もって全てのルートレベルのリアクティブな data プロパティを宣言する必要があります。空の値でもかまいません: ```js var vm = new Vue({ data: { - // declare message with an empty value + // 空の値として message を宣言する message: '' }, template: '