vue.jsのcomputedとmethodsの違いまとめ(算出プロパティ、とメソッドの違い)

Vue.jsを勉強してるとmethodsとcomputedの使い分けについて悩むことありますよね。
いったいどっちに処理を書けばいいか?と。

それを理解するために、両者の違いをまとめてみました。

vue.jsのcomputedとmethodsの違いまとめ

まだ僕自身がvue初心者ですが、いまのところ違いは下記のとおりなのかなと。

methods computed
オブジェクト内での役割 メソッド プロパティ
テンプレートからの呼び出し方 {{ some() }} {{ some }}
処理結果のキャッシュ キャッシュされない キャッシュされる
getter, setter getterのみ定義できる getter, setter両方定義できる

 

とくにcomputedはキャッシュが聞くので、同じ画面の複数箇所で、同じ値の大きな配列を出す場合には、computedが良さげです。処理が高速になるので。

あとはメソッドで良くね?と思ってます。

なんだかんだ、処理はメソッドに書いといたほうが分かりやすいと思うんで。

あとは単純な処理ならcomputedにするとかなのかな。

たとえば、firstNameとlastNameを文字列をつなげて返す、fullNameプロパティを実装するみたいな。

computed: {
        fullName: function () {
            return this.firstName + this.lastName
        }
}

 

逆に乱数を返すみたいな、呼び出す度に戻り値が変化しないと困るものはcomputedではダメ。キャッシュされて同じ値しか帰ってきませんので。

パン田@現役エンジニア

今回は短いけど、こんなもんかなぁ。もっと理解が進んだら追記するかも。
そしたらツイッターでお知らせするよ!


フォローは↓からですよ!