Vue2 watch computed 違い

意外と、Vue2もまだまだ触る機会があるので、
Vue2での watchとcomputedの違い を比較しました。

ざっくり比較

watch

1. 監視プロパティ: 値の変更を監視して、変更したときに処理をするイメージ
2. 特定のdata、computedを監視
3. １が変更されたとき、処理をする
4. 非同期処理・複雑な処理も可能
5. 更新前と更新後の値を使える
6. データを返さなくてもOK

computed（推奨）

1. 算出プロパティ: 値を整形して、新しい値を返すイメージ
2. 特定のdataが更新されたとき、処理をする
3. 必ず、値を返す
4. watchよりスッキリ記述できるので、使えるならこっちが良い
5. setter, getterが使える

コードを比較

watch

■ template
<input v-model="firstName" />
<input v-model="lastName" />

// 初期は、Foo Bar
// firstName か lastName の値が変更したとき、fullNameの値も変わる
<div>{{ fullName }}</div>

■ script
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
　　監視したい値: function (変更後の値, 変更前の値) {
      処理
    },
　　// firstNameを監視
    firstName: function (newVal, oldVal) {
      console.log(oldVal) // 変更前の値も取得できる
　　　// fullNameを変更する処理
      this.fullName = newVal + ' ' + this.lastName
    },
　　// lastNameを監視
    lastName: function (newVal, oldVal) { 
      console.log(oldVal) // 変更前の値も取得できる
　　　// fullNameを変更する処理
　　　this.fullName = this.firstName + ' ' + newVal

      // 非同期処理を行いたいときはwatchが良い
　　　axios.get('xxx')....
    }
  }

computed

■ template
<input v-model="firstName" />
<input v-model="lastName" />
<input v-model="fullName" /> // computedに設定した値をv-modelするときは、setterを設定する

// 初期は、Foo Bar
// firstName か lastName の値が変更したとき、fullNameの値も変わる
<div>{{ fullName }}</div>

■ script
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    算出したい値の名前: function () {
　　　// この中に書かれたdataの値が変更したときに、処理が動く
      処理
      return 整形した値、算出したい値
    },
    // fullNameとして使える
    fullName: function () { // firstName か lastName が変更したときに処理が動く
      return this.firstName + ' ' + this.lastName
    },
    // setter, getter使いたいとき
    fullName: function () { 
      // getter
      get: function () {
        // firstName か lastName が変更したときに処理され、fullNameとして使える
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        // firstName が変更されたときに処理される
        // ex) v-model="fullName"のフォームが書き換わったとき
        var names = newValue.split(' ')
        // firstName, lastNameを変更している
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    },
    
  }

まとめ

• watch
  • api呼び出したり(axiosなど)、非同期処理や複雑な処理をしたいときはこっち
  • ただ、console.log()で値を見たいときもこっち
  • アプリの規模が大きく・複雑になると出番は多くなりそう
• computed
  • 単純に整形した値を返すときはこっち
  • getter, setter 使うならこっち
  • こっちが使えるなら、積極的に使っていこう