リアクティブだと何がうれしいのかについての説明の追加
Opened this issue · 5 comments
該当箇所 https://tuqulore.github.io/vue-3-practices/9
リアクティブとはなにかを表計算ソフトの例と手続的コードを出して説明しているが、結局リアクティブだと何がうれしいか特に説明していないので、必要性が理解しにくいように思った
蛇足かもしれないが、Vueなどのライブラリを使わずにリアクティブを実現しようとするとどうなるか、ここではスライド「リアクティブの探求（リアクティブな値をオブジェクトにまとめる）」と同じ結果をVanilla JSとして書いてみた。
https://stackblitz.com/edit/js-uwi34c?file=index.html,index.js
そもそもDOM要素の取得やテキストの入れ替え処理の煩雑さ、さらにObject.observerが廃止されたので、pureなJSで書くのは大変なことだということが伝わるとうれしい、個人的に。
Vueの公式ドキュメントのリアクティブの探求で説明されているようなProxyによる値の追跡をJSで書いてみたらこうなるという実演としてよさそうに思います
この場合リアクティブか非リアクティブかという比較ではなくてVueなのかVanilla JSかの比較になっており
そもそもDOM要素の取得やテキストの入れ替え処理の煩雑さ、さらにObject.observerが廃止されたので、pureなJSで書くのは大変なことだということが伝わるとうれしい
という話でいけばVueと全く同じことができているかというとできていなくて
（引用部と同じ話を言い換えただけかもしれませんが）テンプレートのどこで追跡している値を入出力して再描画するのか引き続き手続的コードを書く必要がある≒データバインディングの実装が必要
で、リアクティブな値の管理もデータバインディングもやってくれるVueは便利だね、みたいな結論になるのかなと思いました
見た目や結果はは同じでも本質的な説明になってないということで取り下げます
すみません、伝え方としてどうなるかなと思ってコメントしましたが内容として不要かというとそうとも思わないです
もし今日補足として取り扱う予定なら使ってよさそうです
スライドに入れ込むなどは一応先週触れた内容なので直近でおこなう必要はないかなと思いました（次回の研修で説明する時に流れとしてスライドに載っていると嬉しいなと思います）
勝手にクローズしてしまいましたが、自分の提案を取り消すということなので、Reopenします。
公式にこのようなことが載っていましたね、見落としてました。
https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue