Help us understand the problem. What is going on with this article?

【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
配列要素の変更 監視できる 監視できる
配列要素となるオブジェクトの中身の変更 監視できる 監視できない
prum
エンジニアが日本で一番成長できる環境を作り続ける
https://www.prum.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away