[Vue.js] なるべくwatchよりcomputedを使う

Vueのwatchを使いたくなった時は、computedで置き換えられないか検討すること。

computedに比べてwatchはできることが多いが、その分使い所を選ばないとリスクも大きくなる。

例

baseValueおよび、これに1を足したplus1Valueを利用したいとする。

computedの場合

props: {
  baseValue: {
    type: Number,
  }
},

computed: {
  plus1Value: () => this.baseValue + 1
},

常にplus1Value = baseValue + 1という関係が成立し、例外はない

watchの場合

props: {
  baseValue: {
    type: Number,
  }
},

data() {
  return {
    plus1Value: ...
  }
},

watch: {
  baseValue() {
    this.plus1Value = this.baseValue + 1;
  }
},

methods: {
  // watch以外で、plus1Valueに変更をもたらすメソッド
  clear() {
    this.plus1Value = 0;
  }
}

この場合、plus1Value = baseValue + 1が成立するように見えるが、clearが呼ばれると等式が崩れてしまう。

実際にはclearのような変更をもたらすロジックが存在しないとしても、それが存在するかどうか他のロジックを一通りチェックしなければいけない、というcomputedで発生しない手間がいちいち発生する。

上記の例ではbaseValueはpropsだが、dataであったり、APIなど他の箇所から取得した場合も、同様のことが言える。

letよりconstが良い、関数型系の仕組み（map, filter, reduce、...）が良い、みたいな話も大きくくくると同様の考え方

参考

https://jp.vuejs.org/v2/guide/computed.html#算出プロパティ-vs-監視プロパティ

まとめ

Vueの開発Tipsでした。

もともと開発チーム内向けに書いたのですが、せっかくなのでブログでも公開することにしました。