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
100
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
210
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
510
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
すぐに使える ES2015 の基本構文3つ
sshono1210
0
72
肌で感じたディレクションとマネジメント
sshono1210
0
64
Vue.jsで遊んでみよう
sshono1210
0
81
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
270
技術同人誌をMCP Serverにしてみた
74th
1
640
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.9k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Hack Claude Code with Claude Code
choplin
4
2k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Designing Experiences People Love
moore
142
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
A Modern Web Designer's Workflow
chriscoyier
695
190k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
69
11k
KATA
mclloyd
30
14k
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]