Vue.js / Nuxt.js Meetup Osaka #0
Vue.js のmethods と computed
View Slide
ショウノシオリ@shosho_egg ・株式会社 chatbox エンジニア ・PHP(Laravel)、Vue.jsなどを使ってます ・PHPカンファレンス関西2017&2018実行委員長
Vue.js のmethods と computedって違うの?
Vue.js のscript要素<br/>components: { … },<br/>data: { … },<br/>mounted: { … },<br/>created: { … },<br/>methods: {<br/>hoge(){ … }<br/>},<br/>computed: {<br/>piyo(){ … }<br/>},<br/>…<br/>読み込む<br/>タイミングが違う<br/>書き方はほぼ同じだけど、<br/>何が違うの?<br/>
▷ methods○ メソッド○ メソッドなのでhtml上では () が必要○ 毎回呼び出す○ キャッシュされない▷ computed(算出プロパティ)○ プロパティ○ プロパティなのでhtml上では () なし○ プロパティなのでgetter/setterが定義可■ デフォルトはgetterのみ○ 値が変わらなければ呼び出されない○ キャッシュされる調べてみた。
JavaScriptのプロパティ▷ データプロパティ○ 値が格納される▷ アクセサプロパティ○ 値は持たず、getter/setterと呼ばれる関数を設定する。両方を設定してもいいし、片方だけでもよい。■ getter:参照されたときに呼ばれる■ setter:値を変更するときに呼ばれるプロパティには2種類。必ずどちらかに分類でき、両方の性質を兼ね備えることはできない。ちょっと寄り道computed はコレ
▷ 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/152912▷ computedとmethodsの違いhttps://orizuru.io/blog/vue-js/search-function/http://udomomo.hatenablog.com/entry/2017/12/11/213904http://kazu22002.hatenablog.com/entry/2017/10/24/070000▷ 公式ドキュメントhttps://vuejs.org/v2/guide/computed.html#ad
Thanks!Any questions?You can find me at:@username[email protected]