Vue.js の methods と computed 

ショウノシオリ @shosho_egg 　・株式会社 chatbox　エンジニア 　・PHP（Laravel）、Vue.jsなどを使ってます 　・PHPカンファレンス関西2017&2018実行委員長 

Vue.js の methods と computed って違うの？ 

Vue.js のscript要素 components: { … }, data: { … }, mounted: { … }, created: { … }, methods: { hoge(){ … } }, computed: { piyo(){ … } }, … 読み込む タイミングが違う 書き方はほぼ同じだけど、 何が違うの？ 

▷ methods ○ メソッド ○ メソッドなのでhtml上では () が必要 ○ 毎回呼び出す ○ キャッシュされない ▷ computed（算出プロパティ） ○ プロパティ ○ プロパティなのでhtml上では () なし ○ プロパティなのでgetter/setterが定義可 ■ デフォルトはgetterのみ ○ 値が変わらなければ呼び出されない ○ キャッシュされる 調べてみた。 

JavaScriptのプロパティ ▷ データプロパティ ○ 値が格納される ▷ アクセサプロパティ ○ 値は持たず、getter/setterと呼ばれる関数を設定する。両方を設 定してもいいし、片方だけでもよい。 ■ getter：参照されたときに呼ばれる ■ setter：値を変更するときに呼ばれる プロパティには2種類。 必ずどちらかに分類でき、両方の性質を兼ね備えることはできない。 ちょっと 寄り道 computed はコレ 

No content

▷ methods ○ メソッド ○ メソッドなのでhtml上では () が必要 ○ 毎回呼び出す ○ キャッシュされない ▷ computed ○ プロパティ ○ プロパティなのでhtml上では () なし ○ プロパティなのでgetter/setterが定義可 ■ デフォルトはgetterのみ ○ 値が変わらなければ呼び出されない ○ キャッシュされる 

使い分けるならポイントは キャッシュ かな 

どういう風に使い分けるのがいいか？ ▷ 基本的に computed を使い、どうしても必要なときに は methods を使う ○ computed は依存関係にもとづいてキャッシュされるので、 中にdataプロパティがあった場合は変更を常にチェックして 再び処理が走る。 ○ methods はdataプロパティが変わっていても変わらなくて も、毎回処理が走る。 必要な時にだけ処理が走るので、無駄に処理が遅くなら ない。 Data を使って日時などを取得するときは、computed だ とキャッシュされてしまうので methods を使うべき。 

その他注意するところ ▷ methods と computed で同じ名前を使わないこと ▷ 外部からの呼び出し時にも computed ではなく methods を使うべき 

まとめ ▷ methods と computed の大きな違いはキャッシュの有無 ▷ 毎回呼び出す必要がないなら computed を使おう ▷ methods と computed で同じ名前は使わないようにしよ う ▷ watchedプロパティとの使い分け ▷ 「算出プロパティはどうやって動いているか」@kitak さんのスライド https://kitak.github.io/slides/170316-vue-meetup/# 今後勉強してみようかなぁ、と思っていること 

参考 ▷ アクセサプロパティ https://numb86-tech.hatenablog.com/entry/2016/06/04/152 912 ▷ computedとmethodsの違い https://orizuru.io/blog/vue-js/search-function/ http://udomomo.hatenablog.com/entry/2017/12/11/213904 http://kazu22002.hatenablog.com/entry/2017/10/24/07000 0 ▷ 公式ドキュメント https://vuejs.org/v2/guide/computed.html#ad 

Thanks! Any questions? You can find me at: @username [email protected]