You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/change-detection.md
+33-33Lines changed: 33 additions & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -1,64 +1,64 @@
1
-
# Change Detection Caveats in Vue 2
1
+
# Vue 2 での変更検出の注意事項
2
2
3
-
> 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.
Due to limitations in JavaScript, there are types of changes that Vue **cannot detect**. However, there are ways to circumvent them to preserve reactivity.
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 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:
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:
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:
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:
87
+
Vue では新しいルートレベルのリアクティブなプロパティを動的に追加することはできないため、インスタンスの初期化時に前もって全てのルートレベルのリアクティブな data プロパティを宣言する必要があります。空の値でもかまいません:
88
88
89
89
```js
90
90
var vm =newVue({
91
91
data: {
92
-
//declare message with an empty value
92
+
//空の値として message を宣言する
93
93
message:''
94
94
},
95
95
template:'<div>{{ message }}</div>'
96
96
})
97
-
//set `message` later
97
+
//後で`message` を追加する
98
98
vm.message='Hello!'
99
99
```
100
100
101
-
If you don't declare `message`in the data option, Vue will warn you that the render function is trying to access a property that doesn't exist.
101
+
data オプションで `message`を宣言していないと、Vue は render 関数が存在しないプロパティにアクセスしようとしていることを警告します。
102
102
103
-
There are technical reasons behind this restriction - it eliminates a class of edge cases in the dependency tracking system, and also makes component instances play nicer with type checking systems. But there is also an important consideration in terms of code maintainability: the `data`object is like the schema for your component's state. Declaring all reactive properties upfront makes the component code easier to understand when revisited later or read by another developer.
In case you haven't noticed yet, Vue performs DOM updates **asynchronously**. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native `Promise.then`, `MutationObserver`, and `setImmediate`for the asynchronous queuing and falls back to `setTimeout(fn, 0)`.
107
+
おそらく既にお気づきでしょうが、Vue は **非同期** に DOM 更新を実行します。データ変更が検出されると、Vue はキューをオープンし、同じイベントループで起こる全てのデータ変更をバッファリングします。同じウォッチャが複数回トリガされる場合、キューには一度だけ入ります。この重複除外バッファリングは不要な計算や DOM 操作を回避する上で重要です。そして、次のイベントループ "tick" で、Vue はキューをフラッシュし、実際の(すでに重複が除外された)作業を実行します。内部的には、Vue は非同期キューイング向けにネイティブな `Promise.then` と `MutationObserver`、`setImmediate`が利用可能ならそれを使い、`setTimeout(fn, 0)` にフォールバックします。
108
108
109
-
For example, when you set `vm.someData = 'new value'`, the component will not re-render immediately. It will update in the next "tick", when the queue is flushed. Most of the time we don't need to care about this, but it can be tricky when you want to do something that depends on the post-update DOM state. Although Vue.js generally encourages developers to think in a "data-driven" fashion and avoid touching the DOM directly, sometimes it might be necessary to get your hands dirty. In order to wait until Vue.js has finished updating the DOM after a data change, you can use `Vue.nextTick(callback)`immediately after the data is changed. The callback will be called after the DOM has been updated. For example:
109
+
例として、`vm.someData = 'new value'` をセットした時、そのコンポーネントはすぐには再描画しません。 次の "tick" でキューがフラッシュされる時に更新します。ほとんどの場合、私達はこれについて気にする必要はありませんが、更新した DOM の状態に依存する何かをしたい時は注意が必要です。Vue.js は一般的に"データ駆動"的な流儀で考え、DOM を直接触るのを避けることを開発者に奨励しますが、時にはその手を汚す必要があるかもしれません。データの変更後に Vue.js の DOM 更新の完了を待つには、データが変更された直後に `Vue.nextTick(callback)`を使用することができます。そのコールバックは DOM が更新された後に呼ばれます。例えば:
110
110
111
111
```html
112
112
<divid="example">{{ message }}</div>
@@ -119,14 +119,14 @@ var vm = new Vue({
119
119
message:'123'
120
120
}
121
121
})
122
-
vm.message='new message'//change data
122
+
vm.message='new message'//データを変更する
123
123
vm.$el.textContent==='new message'// false
124
124
Vue.nextTick(function() {
125
125
vm.$el.textContent==='new message'// true
126
126
})
127
127
```
128
128
129
-
There is also the `vm.$nextTick()`instance method, which is especially handy inside components, because it doesn't need global `Vue` and its callback's `this`context will be automatically bound to the current component instance:
Since `$nextTick()`returns a promise, you can achieve the same as the above using the new [ES2017 async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)syntax:
0 commit comments