【Vue.js】データが変化したときのcomputed / watch

今回は、算出プロパティと、監視プロパティについて、何が違うのかまとめてみたいと思います。

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>

1. todosの中でも、isDoneがfalseの要素のみを抽出する（remainItems）
2. 抽出したremainItemsの数を格納する（remaining）
3. 残ったタスク / タスクの総数としてブラウザに表示させる

#監視プロパティ　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
    }
  }
})

1. 今回の監視データは、todosを指定している。
2. handler内で、変化があった時の処理を行う（ローカルストレージにJSON形式でtodosに、変化後のtodosを保存(setItem)している。）
3. deepオプションで、データの中身の部分まで監視することができる。

##deep watcherの監視範囲

	deep: true	deep: false
配列要素の変更	監視できる	監視できる
配列要素となるオブジェクトの中身の変更	監視できる	監視できない