Vue.jsのreactive周りの仕組みをコードを読んで理解してみる

自己紹介岩本海童フロントエンドエンジニア Android、サーバーサイドは経験はあるが、最近は趣味で触る程度 React, TypeScriptが得意去年からVue.jsを初めて仕事で使い始めた

宣伝：趣味で作っているサービスなど Kakeru (https://about.kakeru.app) ブラウザで動く共同編集もできる手書きメモのアプリ炭水化物量計算くん (https://carbs-calc.pages.dev) 食材とその量を入力して炭水化物量を計算する

本題: Vue.jsのreactiveってどういう仕組みなの？ Reactに慣れていると、なんかとても便利で不思議な仕組み使っていておおよそ仕組みはイメージできるけど、ちゃんとコード読んで確かめたい

かなり雑で、一部のケースを読み飛ばしたりしています。指摘や質問など大歓迎です。

どこから始める？リポジトリ: vuejs/core とりあえず ref() と reactive() 初心者「ほぼ同じでしょ？」あとは、それらの変更を検知する側である watch()
computed() はたぶん仕組みが同じなので今回はパス

定義場所を探す ref() : packages/reactivity/src/ref.ts reactive() : packages/reactivity/src/ref.ts watch() : packages/runtime-core/src/apiWatch.ts

ref編

ref 関数 createRefを呼んでいるだけ（shallow: false） createRef 関数 new RefImpl()してるだけ

RefImpl クラス (1) valueプロパティのgetter/setterがある _value に toReactive() した値オブジェクトなら reactive()
でラップ、それ以外はそのまま _rawValue に toRaw() した値値がreactiveならアンラップしたもの

RefImpl クラス (2) getter trackRefValue を呼ぶ _value を返す setter toRawした新しい値を
_rawValue と比較する変化していれば、 _value と _rawValue に代入し、 triggerRefValue を呼ぶ

事前知識: ReactiveEffectについて watchやcomputedなどの内部で使われる、reactiveな値が変化した時に実行される処理のかたまりのようなものです（雑な理解）参照されたreactiveな値が変化したかどうかのフラグを持つ

runメソッドが呼ばれると、引数で渡された関数(fn)を実行するその際に、関数の内部で参照されたreactiveな値をトラッキングするための準備やその後の後片付けなどを行う現在実行中のReactiveEffectがモジュールの変数に入っていて、trackEffect関数から参照できる triggerやschedulerという引数で与えられた関数が間接的にrunメソッドを呼ぶことになる

trackRefValue 関数 Refオブジェクトに dep?: Map<ReactiveEffect, number> というプロパティがあるキーはRefを参照しているReactiveEffectで、値は何回目の実行か( _trackId )
一方、ReactiveEffectはdepsというプロパティにdepの配列を持っている depがundefinedなら初期化する trackEffect を呼んで現在実行中のReactiveEffectに値が参照されたことを知らせる

trackEffect 関数 (reactive関数の方でも呼ばれる共通のやつ) depsに現在実行中のReactiveEffectとその _trackId をセットする（ _trackId については省略）場合によっては、前の実行のcleanup処理などを行うが、詳細は省略（お茶をにごす）

triggerRefValue 関数 triggerEffect を呼んで、参照しているReactiveEffectに値の変更を通知する triggerEffect 関数 (reactive関数の方でも呼ばれる共通のやつ) RefオブジェクトのdepにのキーになっているReactiveEffectたちの処理を呼び起こす

ref 編終わり valueが参照されたら参照を記録し、valueが変更されたら変更を通知するという割と素朴な仕組み（deps周りの処理は少し複雑だけど）

reactive 編(1) 長くなりそうなので手短に refがvalueプロパティを持つオブジェクト(RefImpl)を返したのに対して、こちらはProxy を返します Proxyはプロパティのget/set、関数呼び出しなどをフックできる与えられたオブジェクトをラップして、元のオブジェクトそっくりに振る舞いながら参照や変更を監視する Refと同様にdepプロパティを持っている

reactive 編(2) プロパティのgetが呼ばれた場合... trackEffect を呼び出してReactiveEffectに参照を通知する（depを更新する）オブジェクト本体のプロパティの値を toReactive して返すプロパティのsetが呼ばれた場合 triggerEffectを呼び出してReactiveEffectを呼び起こす
オブジェクト本体のプロパティの値を更新する

（終わり）（短い）

watch 編 doWatch 関数が本体

doWatch 関数(1) 第1引数はいくつかのパターンがあるが、どのパターンも関数でラップされて getter となる oldValue変数で最後に実行したgetterの戻り値を持っておく job 関数 effectがdirtyなら、effectを実行する（getterの戻り値が返ってくる）
前回から値が変化していれば、コールバックを実行する scheduler 関数 job を次のマイクロタスクで実行する

doWatch 関数(2) effect = ReactiveEffect(getter, NOOP, scheduler) でReactiveEffectを初期化する unwatch
関数 effectのstopを呼んで無効化する immediateオプションがtrueの場合はeffectを実行して結果をoldValueに入れておく実行するとscheduler→job→コールバックの流れで呼ばれる unwatchを返す

まとめ

ReactiveEffectというクラスで、関数内で参照されたreactive系のオブジェクトをトラッキングし、変更された際に通知を受けるとことができる ref関数やreactive関数が返すオブジェクトは、ReactiveEffectからアクセスされると参照が記録され、変更されるとReactiveEffectに通知される watch関数はReactiveEffectを使って、与えられたref/reactiveオブジェクトや関数の返す値が変更されたことを検知してコールバックを実行することができる

ありがとうございました。質問などあればどうぞ！

Vue.jsのreactive周りの仕組みをコードを読んで理解してみる

Vue.jsのreactive周りの仕組みをコードを読んで理解してみる

Kaido Iwamoto

More Decks by Kaido Iwamoto

Other Decks in Programming

Featured

Transcript