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
71
肌で感じたディレクションとマネジメント
sshono1210
0
63
Vue.jsで遊んでみよう
sshono1210
0
79
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
C++20 射影変換
faithandbrave
0
540
Create a website using Spatial Web
akkeylab
0
310
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
WindowInsetsだってテストしたい
ryunen344
1
200
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.2k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
700
GraphRAGの仕組みまるわかり
tosuri13
8
500
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Building Applications with DynamoDB
mza
95
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Into the Great Unknown - MozCon
thekraken
39
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Review Best Practice
trishagee
68
18k
We Have a Design System, Now What?
morganepeng
53
7.7k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Bash Introduction
62gerente
614
210k
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]