【Vue.js】computedとmethodsの違い

Vue.js触るの楽しいです。

ただ、絶賛混乱中です。

computedとmethodsとの違いについて、使い方が混乱しています。

jp.vuejs.org

算出プロパティのcomputed

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('');
    }
  }
})
</script>

サンプル確認しながら、理解を深めようと頑張ってみます。

Vue は vm.reversedMessage が vm.message に依存していることを知っているので、・・・

説明をよみましたが、どうやら算出プロパティの中身でdataプロパティがある場合に、変更を常にチェックしているみたいです。

methodの関数

computedの内容がmethodsでもかけるみたいですね。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Reversed message: "{{ reverseMessage() }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  // コンポーネント内
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

</script>

methodsでも同じようにdataプロパティをチェックしているみたいで同じ結果になるみたいです。

本当に同じ動作に見えて混乱します。

computedはキャッシュされる

computedとmethodsの違いについて記述されていたため、引用です。

算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。

キャッシュされる機能があるため、依存する変数がかわらない返り値が変わらないみたいです。

キャッシングしたくない場合は、代わりにメソッドを使いましょう。

とのことです。

computedとmethodsに同じ名前を使ってみるとどうなる

同じような呼び出しだから、名前同じにしたらどう動作するんだろうと思い、試してみました。

呼び出し元は()の有無でcomputedとmethodsの呼び出しが違うみたいです。

同じ名前でmethodsを呼ぶことはできましたが、computed側はプログラムがそのまま表示されるような表示になってしまいました。

同じ名前はとりあえず辞めておきましょう。

computedは外部から呼べない？

Vue.jsを書いていると、だいたいcomputedで大丈夫だと思えます。

ただ外部から呼び出しする際には、computedでは呼び出しできないから、methodsを使用するのがいいのかな。

個人的にはmethodsはそこまで使わないのかな。と思っています

引数を渡してみる

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Reversed message: "{{ reverseMessage( 'a') }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  // コンポーネント内
  methods: {
    reverseMessage: function ( args ) {
      return this.message.split('').reverse().join('') + args;
    }
  }
})

</script>

引数指定も可能ですね。引数を渡さない場合は「undefined」になったので、エラーチェックとかしていればうまく使える可能性もありますね。

なかなか考えることが多かった

dataの値を監視しているのは、computedだけだと思っていましたが、methodsも監視されているっぽいのは驚きました。

適当に書いててなんでうごくんだろう。とおもってたらmethodsが勝手に動いていたみたいです。

使い方の違いを少し理解できたので、これから意識して使い分けてみようと思います。