値300個・処理120個で更新を5000回かけました。1回あたり動く処理は平均0.96個です。
ただし最も多い1回は53個でした。平均だけを見ていると、この山を見落とします。
更新を知らせる記述を書きません。その代わり、何が動くかも書いた側からは見えません。
Vueが前面に出しているのは目立たなさです。出典もそう述べています。
Vueの最も特徴的な機能の1つが、出しゃばらない反応の仕組みであるという言い方です。書く側の記述に現れないことを利点として挙げています。
実際、値を変える記述は普通の代入です。更新を知らせる呼び出しは書きません。
2番目が実務で効きます。1つの代入がどこまで波及するかは、記述を読んでも分かりません。
だから測るしかありません。次の節で、実際に数えた結果を出します。
仕組みそのものは値の入れ物と、画面を作る処理の2つで成り立ちます。どちらも枠組みが用意します。
書く側が用意するのはどの値をどこで読むかだけです。この選び方が、あとの動き方を決めます。
One of Vue's most distinctive features is the unobtrusive reactivity system.原文Vue.js 公式ドキュメント「Reactivity in Depth」 この内容の有効期限2027-02-18
ほとんどの更新は何も動かしません。ごく一部の更新だけが、全体の4割を一度に動かします。
Vueの記録は読んだ時点で作られます。出典の説明はこうです。
実行中の処理がある状態で変数が読まれたなら、その処理をその変数の購読者にするというものです。読む行為が登録になります。
この登録がどれだけの呼び戻しにつながるかを数えました。
値300個、画面を作る処理120個です。1つの処理は3〜8個の値を読みます。
値 300個・画面を作る処理 120個。1つの処理は3〜8個の値を読む 読んだ値との対応を記録しておき、その値が変わったときだけ呼び戻す 記録した対応 644件 5000回の更新で変わった値 298個 / 300個 一度も変わらなかった値への記録 9件（1.4%） やり方 1回の更新で動く処理 全体に対する割合 最も多かった1回 全部やり直す 120個 100.0% 120個 記録から呼び戻す 0.96個 0.8% 53個
平均は0.96個です。全部やり直す120個と比べて0.8%になります。
5000回のうち2569回（51.4%）は、誰も読んでいない値だったので何も動きませんでした。
右端の列を見てください。最も多い1回で53個が動きました。
処理120個のうち44%です。平均0.96個からは想像できない量が、1回の代入で走ります。
この差が出るのは、読まれる回数が値によって大きく違うためです。多くの処理から読まれている値が1つあれば、そこが山になります。
そういう値を探すのが実務です。画面が固まる場面は、平均ではなくこの53個のほうから来ます。
同じ1回の更新でも、値によって波及がまったく違う。
If a variable is read when there is a currently running effect, make that effect a subscriber to that variable.原文Vue.js 公式ドキュメント「Reactivity in Depth」 この内容の有効期限2027-02-18
記録を作るのも、たどるのも実行時です。使わない記録の分まで、その場で作られます。
Vueの追跡は実行時に走ります。出典はVueの反応の仕組みは主として実行時に基づくもので、追跡も発火も、コードがブラウザで直接動いている最中にすべて行われると明言しています。
先ほどの計測でいえば、644件の対応が動かしている最中に作られます。
644件のうち9件（1.4%）は、最後まで使われませんでした。読まれたけれど一度も変わらなかった値への記録です。
この割合は更新の回数で変わります。短い操作で終わる画面ほど、使われない記録の割合が上がります。
記録を作る手間そのものは小さいものですが、読むたびに走る点が違います。読む回数が多い処理では、この分が積み上がります。
同じ追跡を変換の段階で入れる作りもあります。実行時に決める部分が減ります。
そちらの測り方はSvelteの記事で扱っています。波及の広さは平均21.9個・最大85個でした。
どちらでも波及の広さそのものは変わりません。変わるのは、記録を作る手間をどこで払うかです。
読まれやすさと変わりやすさは別々の偏りとして置きました。よく読まれる値がよく変わるとは限らないという前提です。実際の画面では、よく読まれる値ほど頻繁に変わることがあり、その場合の平均は0.96個より大きくなります。ここで見せているのは、平均と最大が桁で違うという関係で、その差は自分の画面でも数えられます。
Vue's reactivity system is primarily runtime-based: the tracking and triggering are all performed while the code is running directly in the browser.原文Vue.js 公式ドキュメント「Reactivity in Depth」 この内容の有効期限2027-02-18
同じ課題を持つ会社にとって、動いている設定は「作る時間」を買えるということです。ServiceDockは自作のワークフローやテンプレートを出品できるマーケットプレイスです。手数料や出品の流れは出品者向けページにまとまっています。
出品の仕組みを見る