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ではダメ。キャッシュされて同じ値しか帰ってきませんので。
パン田@現役エンジニア
今回は短いけど、こんなもんかなぁ。もっと理解が進んだら追記するかも。
そしたらツイッターでお知らせするよ!
今はRubyの仕事をしてます。
働いてるのは週に2日だけですが、それでも年収は400万近くまでいきます。 プログラミングは安定して、そこそこの金額を稼げるいい仕事です 実務経験が5年くらいあれば誰でもできるので駆け出しエンジニアさんも夢があるんじゃないかと。 — ぱんだ@週2日エンジニア/フリーランス (@panda_program_) March 17, 2019
フォローは↓からですよ!
Follow @panda_program_