Vue の Input における State は親で持つべきか子で持つべきか

Transcript

1. Vue の Input における State は親 で持つべきか子で持つべきか 2024/07/04 LT大会 by t0yohei
2. 自己紹介 • 名前: t0yohei • 最近の役割: デザインシステム関連の実装全般 • 好きな物: Ruby、Vue.js、コーヒー、アニメ
3. はじめに
4. 超フロントエンド実装寄りの話です (ごめんなさい ) - 他のネタ思いつきませんでした... - 「かような話もあるんどすなぁ」くらいの心持ちで聞いて頂ければ 󰢛 - 間違ったことを言っていたら、優しく指摘ください！ 🙅🪓
5. 本題
6. Vue.js の状態管理にまつわる話です
7. Vue.js の状態管理の肝は、 更新可能な reactive state を どこで管理するかです！
8. Vue.js の状態管理の肝は、 更新可能なリアクティブな状態を どこで管理するかです！
9. 用語整理: 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 を指します
10. reactive state は更新可能 - .value をつけることで更新可能 - const hoge = ref(‘hoge’) - hoge.value = ‘foo’
11. reactive な state が更新されると、関連する DOM も更新される
12. Vue.js の状態管理の肝は、 更新可能な reactive state を どこで管理するかです！
13. Vue の Input における State は親 で持つべきか子で持つべきか 2024/07/04 LT大会 by t0yohei
14. Vue の Input
15. 親が子の状態に関与しない場合は、 さっきみたく子に state を持たせたらいい
16. ただこの実装だと、親から 子の状態を取得するのがちょい大変
17. バックエンドの API にデータを送る時とか、 親で子のデータを使いたい
18. ref 属性と defineExpose を使うパターン
19. ref と defineExpose を使うパターン メリット state は子で持っている 1 つだけなの で管理はしやすい デメリット 親・子・孫と階層が深くなってくると、 末端の state 取得が大変
20. 親でもStateを持って、子の更新を監視するパターン
21. 親でもStateを持って、子の更新を監視するパターン メリット 親の state が子の state と同期してい るので、親での子の state 取得が簡 単(と言うか不要) デメリット 親・子・孫と階層が深くなってくなるご とに、 state が増えてしまい管理が大 変 (子だけ別の値になっちゃうとか...)
22. 子に state を持たせないようにする (親だけに state を持たせる ) にはどうするか
23. 子は親から渡ってきた値の表示と、 値の変更を親に通知するだけにする
24. 子に state を持たせないパターン
25. emit を使ったバージョン
26. 子に State を持たせないパターン メリット - State は 1 つなので状態管理が 楽 - 親で State を管理しているので、 子の state 取得が簡単(と言うか 不要) デメリット 実際の入力値を後から親の State で 上書きする形なので、上書きに失敗 すると DOM の値と親の State が別 値になってしまう危険性がある
27. デメリットの詳細
28. とはいえメリットが大きいので、 現状親に State を持たせるパターン推し
29. 他に何か良い方法があれば 教えてください！
30. 番外編
31. Emit 派？関数渡し派？
32. 階層が増えても実装が楽な関数渡し派
33. ご清聴ありがとうございました！