今回は、算出プロパティと、監視プロパティについて、何が違うのかまとめてみたいと思います。
computedとwatchの違い
いずれも、コンポーネントのデータの中身に変化があった時に発動するものだが、その動作に違いがある
| プロパティ | データに変化があった時 |
|---|---|
| computed | データの中身を変化させたものを表現できる |
| watch | データの中身を変える以外の何らかの処理を発動する |
算出プロパティ computed
let vm = new Vue({
el: '#app',
data: {
newItem: '',
todos: [
{ title: 'task1', isDone: false },
{ title: 'task2', isDone: false },
{ title: 'task3', isDone: false },
]
},
computed: {
remaining: function(){
let remainItems = this.todos.filter(function(todo){
return !todo.isDone;
});
return remainItems.length;
}
}
})
<span>{{ remaining }}/{{ todos.length }}</span>
- todosの中でも、isDoneがfalseの要素のみを抽出する（remainItems）
- 抽出したremainItemsの数を格納する（remaining）
- 残ったタスク / タスクの総数としてブラウザに表示させる
監視プロパティ watchキー
let vm = new Vue({
el: '#app',
data: {
newItem: '',
todos: [
{ title: 'task1', isDone: false },
{ title: 'task2', isDone: false },
{ title: 'task3', isDone: false },
]
},
watch: {
todos: {
handler: function(){
localStorage.setItem('todos', JSON.stringify(this.todos));
},
deep: true
}
}
})
- 今回の監視データは、todosを指定している。
- handler内で、変化があった時の処理を行う（ローカルストレージにJSON形式でtodosに、変化後のtodosを保存(setItem)している。）
- deepオプションで、データの中身の部分まで監視することができる。
deep watcherの監視範囲
| deep: true | deep: false | |
|---|---|---|
| 配列要素の変更 | 監視できる | 監視できる |
| 配列要素となるオブジェクトの中身の変更 | 監視できる | 監視できない |