Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js の methods と computed
Search
ショウノシオリ
June 30, 2018
Programming
0
110
Vue.js の methods と computed
Vue.js / Nuxt.js Meetup Osaka #0
ショウノシオリ
June 30, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
230
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.3k
array_merge と array_push の違いについて
sshono1210
0
530
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
240
すぐに使える ES2015 の基本構文3つ
sshono1210
0
80
肌で感じたディレクションとマネジメント
sshono1210
0
72
Vue.jsで遊んでみよう
sshono1210
0
88
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
CSC305 Lecture 03
javiergs
PRO
0
240
Cursorハンズオン実践!
eltociear
2
1.1k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
CSC509 Lecture 04
javiergs
PRO
0
300
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Applications with DynamoDB
mza
96
6.7k
A designer walks into a library…
pauljervisheath
209
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Designing for Performance
lara
610
69k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Transcript
Vue.js の methods と computed
ショウノシオリ @shosho_egg ・株式会社 chatbox エンジニア ・PHP(Laravel)、Vue.jsなどを使ってます ・PHPカンファレンス関西2017&2018実行委員長
Vue.js の methods と computed って違うの?
Vue.js のscript要素 <script> components: { … }, data: { …
}, mounted: { … }, created: { … }, methods: { hoge(){ … } }, computed: { piyo(){ … } }, … 読み込む タイミングが違う 書き方はほぼ同じだけど、 何が違うの?
▷ methods ◦ メソッド ◦ メソッドなのでhtml上では () が必要 ◦ 毎回呼び出す
◦ キャッシュされない ▷ computed(算出プロパティ) ◦ プロパティ ◦ プロパティなのでhtml上では () なし ◦ プロパティなのでgetter/setterが定義可 ▪ デフォルトはgetterのみ ◦ 値が変わらなければ呼び出されない ◦ キャッシュされる 調べてみた。
JavaScriptのプロパティ ▷ データプロパティ ◦ 値が格納される ▷ アクセサプロパティ ◦ 値は持たず、getter/setterと呼ばれる関数を設定する。両方を設 定してもいいし、片方だけでもよい。
▪ getter:参照されたときに呼ばれる ▪ setter:値を変更するときに呼ばれる プロパティには2種類。 必ずどちらかに分類でき、両方の性質を兼ね備えることはできない。 ちょっと 寄り道 computed はコレ
None
▷ 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]