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 の Input における State は親で持つべきか子で持つべきか
Search
t0yohei
December 20, 2024
0
31
Vue の Input における State は親で持つべきか子で持つべきか
t0yohei
December 20, 2024
Tweet
Share
More Decks by t0yohei
See All by t0yohei
Vue.js を使って Grid System を実装した話
t0yohei
2
7k
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
t0yohei
0
2k
プログラミング入門に失敗した話
t0yohei
0
180
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
380
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
180
Ruby と JavaScript の違い( Function 編)
t0yohei
1
310
副業のノウハウ
t0yohei
0
190
ちょっとしたRubyの話
t0yohei
1
480
自作キーボード入門してみた
t0yohei
0
140
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Facilitating Awesome Meetings
lara
54
6.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Why Our Code Smells
bkeepers
PRO
336
57k
Rails Girls Zürich Keynote
gr2m
95
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Transcript
Vue の Input における State は親 で持つべきか子で持つべきか 2024/07/04 LT大会 by
t0yohei
自己紹介 • 名前: t0yohei • 最近の役割: デザインシステム関連の実装全般 • 好きな物: Ruby、Vue.js、コーヒー、アニメ
はじめに
超フロントエンド実装寄りの話です (ごめんなさい ) - 他のネタ思いつきませんでした... - 「かような話もあるんどすなぁ」くらいの心持ちで聞いて頂ければ - 間違ったことを言っていたら、優しく指摘ください!
🙅🪓
本題
Vue.js の状態管理にまつわる話です
Vue.js の状態管理の肝は、 更新可能な reactive state を どこで管理するかです!
Vue.js の状態管理の肝は、 更新可能なリアクティブな状態を どこで管理するかです!
用語整理: reactive な state(リアクティブな状態 ) - Vue.js で言うと ref(), reactive()
関数で初期化される変数 - reactive な state - const hoge = ref(‘hoge’) - reactive じゃない値 - const fuga = ‘fuga’ - let piyo = ‘piyo’ - 単に state と言う場合は、この reactive な stateを刺すことが多い(多分) - この発表でも、以後 state といった場合は reactive な state を指します
reactive state は更新可能 - .value をつけることで更新可能 - const hoge =
ref(‘hoge’) - hoge.value = ‘foo’
reactive な state が更新されると、関連する DOM も更新される
Vue.js の状態管理の肝は、 更新可能な reactive state を どこで管理するかです!
Vue の Input における State は親 で持つべきか子で持つべきか 2024/07/04 LT大会 by
t0yohei
Vue の Input
親が子の状態に関与しない場合は、 さっきみたく子に state を持たせたらいい
ただこの実装だと、親から 子の状態を取得するのがちょい大変
バックエンドの API にデータを送る時とか、 親で子のデータを使いたい
ref 属性と defineExpose を使うパターン
ref と defineExpose を使うパターン メリット state は子で持っている 1 つだけなの で管理はしやすい
デメリット 親・子・孫と階層が深くなってくると、 末端の state 取得が大変
親でもStateを持って、子の更新を監視するパターン
親でもStateを持って、子の更新を監視するパターン メリット 親の state が子の state と同期してい るので、親での子の state 取得が簡
単(と言うか不要) デメリット 親・子・孫と階層が深くなってくなるご とに、 state が増えてしまい管理が大 変 (子だけ別の値になっちゃうとか...)
子に state を持たせないようにする (親だけに state を持たせる ) にはどうするか
子は親から渡ってきた値の表示と、 値の変更を親に通知するだけにする
子に state を持たせないパターン
emit を使ったバージョン
子に State を持たせないパターン メリット - State は 1 つなので状態管理が 楽
- 親で State を管理しているので、 子の state 取得が簡単(と言うか 不要) デメリット 実際の入力値を後から親の State で 上書きする形なので、上書きに失敗 すると DOM の値と親の State が別 値になってしまう危険性がある
デメリットの詳細
とはいえメリットが大きいので、 現状親に State を持たせるパターン推し
他に何か良い方法があれば 教えてください!
番外編
Emit 派?関数渡し派?
階層が増えても実装が楽な関数渡し派
ご清聴ありがとうございました!