Vue.jsで使うcomputed、methods、watchを比較

プログラミング

こんにちは。現役フリーランスWebエンジニアの@Masaweb4です。

未経験からエンジニアに転職した経験やプログラミングに関する内容を発信しています。

Vue.jsってcomputed、methods、watchが似ていてどんな時にどれを使ったらいいのか悩みません?

今回はこのような疑問に答えていきます。

  1. それぞれの特徴を理解する
  2. 使い方を理解する

この2点に注意しながら学べば使えるようになるよ。

Vue.jsの基本は以下の記事でも扱っているのでご覧ください。

Contents

  1. Vue.jsのmethods、computedの比較
    1. computedの特徴
    2. methodsの特徴
    3. computedとmethodsの違い
  2. watchとcomputedの比較
    1. watchの特徴
    2. watchの特徴
    3. watchとcomputedの使い分けは?
  3. まとめ

Vue.jsのmethods、computedの比較

methods、computed、watchは似ていて違いがわかりにくいという話をよく聞くので整理してみます。

Vue.jsでボタンをクリックするとカウントアップ、カウントダウンするというものをサンプルで作ってみました。

上がcomputedで処理される部分。下がmethodの部分です。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <p>computed   [{{ count1 }}]</p>
    <p>{{ clickCount1 }}</p>
    <button v-on:click="count1 += 1">カウントアップ</button>
    <button v-on:click="count1 -= 1">カウントダウン</button>
    <hr />
    <p>methods [{{ count2 }}]</p>
    <p>{{ clickCount2() }}</p>
    <button v-on:click="count2 += 1">カウントアップ</button>
    <button v-on:click="count2 -= 1">カウントダウン</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    count1: 5,
    count2: 5
  },
  computed: {
    clickCount1: function() {
      console.log('count1')
      return this.count1 > 5 ? '5より大きい' : '5以下'
    }
  },
  methods: {
    clickCount2: function() {
      console.log('count2')
      return this.count2 > 5 ? '5より大きい' : '5以下'
    }
  }
})

computedの特徴

computedの方にあるカウントアップ、カウントダウンのボタンがクリックされると、computedのclickCount1が呼び出されるという動作です。

公式では、computedプロパティについて以下のような説明をしています。

算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。
参照元: Vue.js公式

computedの場合は、参照先(count1)に変更がない時は呼び出されないという特徴がある。他の値(count2)が変更になっても呼ばれない。

変更前の値をキャッシュしていて、(count1)に変更があった場合のみ書き換えるということですね。

算出プロパティ example は、vm.msg という1つだけの依存関係を持っています。Date.now() というタイムスタンプは、Vue のデータ監視システムとは何も関係ないため、リアクティブな依存関係ではありません。
参照元: Vue.js公式

var vm = new Vue({
  data: {
    msg: 'hi'
  },
  computed: {
    example: function () {
      return Date.now() + this.msg
    }
  }
})

公式ではDate.now()のようなリアクティブな依存関係にないためDate.now()が変更されても呼び出されない。this.msgに変更があった時のみ再評価されるとあります。

computedのexampleはDate.new()に変更があった場合でも呼ばれそうと思ってしまうので注意したいですね

methodsの特徴

methodsの方にあるカウントアップ、カウントダウンボタンがクリックされると、methodsのclickCount2が呼び出されるという動作です

メソッド呼び出しは、再描画が起きると常に関数を実行します。
参照元: Vue.js公式

methodsの場合はVueインスタンスに変更が合った場合に再描画されるという特徴がある。

computedとmethodsの違い

computedはプロパティでmethodsは関数であるという違いがあります。

computedはキャッシュされているため、count1の値に変更がないと呼ばれないけれども、methodsは他の値が書き換わっても呼ばれてしまい処理が走ってしまう。

頻繁に画面の値が書き換わるような場合は、computedを使う方が良いとされています。

値が何度も変更されると毎回methodsプロパティは呼び出されるため、クライアント側の動作が重くなる可能性があるということですね。判断してmethodsとcomputedを使い分ける必要がありそうです。

watchとcomputedの比較

watchとcomputedは似ていて使い分けに悩むと思います。

watchの特徴

watchは監視プロパティで値が変わった時に呼ばれる。公式の説明は以下です。

データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。
参照元: Vue.js公式

watchとcomputedの使い分けは?

基本的にcoumputedを使うが、非同期処理を行う場合はreturnが使えないため、returnをするcomputedプロパティを使えない。そのような場合にwatchを使用するべきということです。

まとめ

computedやmethodsをテンプレート内に記述することが可能な場合もあると思いますが、それをしてしまうとテンプレートが複雑化してしまいます。

Vue.jsは多くの場合、フロントエンドエンジニアの範疇ですが、サーバーサイドのエンジニアも触るし、コーディングする人たちも触ることもあると思う。

そのような場合にテンプレートが複雑になっているとメンテナンスしにくいので、積極的にcomputedあたりを使っていくのがベターかと思います。



MEMO
  1. 未経験の方は早めに目標を決めましょう。
  2. 何を作りたいか、どんなものを作りたいか考える。そしてそのために何を学ぶか調べます。
  3. あとは独学でやってみる(プログラムを書いてみる)
  4. 独学で実績(公開できるレベルのもの)を作れるなら転職活動・就職活動をしてみる。
  5. 難しい場合はスクールに通い実績を作り、早めに就職する。