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
220
開発チームのリーダーとしてどうあるべきか?
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
230
すぐに使える ES2015 の基本構文3つ
sshono1210
0
78
肌で感じたディレクションとマネジメント
sshono1210
0
70
Vue.jsで遊んでみよう
sshono1210
0
86
Other Decks in Programming
See All in Programming
Namespace and Its Future
tagomoris
6
700
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
rage against annotate_predecessor
junk0612
0
170
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.7k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Deep Dive into Kotlin Flow
jmatsu
1
350
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
280
アセットのコンパイルについて
ojun9
0
130
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building an army of robots
kneath
306
46k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Building Adaptive Systems
keathley
43
2.7k
Designing for Performance
lara
610
69k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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]