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
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
2
5.1k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
820
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Devoxx BE 2025 Loom lab
josepaumard
0
110
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
650
モテるデスク環境
mozumasu
3
300
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
The Pragmatic Product Professional
lauravandoore
36
7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building Adaptive Systems
keathley
44
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Documentation Writing (for coders)
carmenintech
75
5.1k
Practical Orchestrator
shlominoach
190
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Building an army of robots
kneath
306
46k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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]