Vue 3のリアクティビティはJavaScript Proxiesの上に構築されています。状態をリアクティブにすると、Vueはそれをプロキシでラップし、読み取りと書き込みをインターセプトし、追跡して、どのエフェクトがどのプロパティに依存しているかを識別し、データが変更されるとそれらのエフェクトをトリガーしてを再実行させます。
() {
(target, {
() {
(obj, key);
obj[key];
},
() {
obj[key] = value;
(obj, key);
;
},
});
}
プロパティを読み取ることで、現在実行中のエフェクトを依存関係として追跡します。書き込むことで、それを読み取るすべてのエフェクトをトリガーします。これにより、Vueは特定のプロパティが変更されたときに正確にどのコンポーネントをレンダリングまたはどの計算プロパティを更新するかを知ることができます。
// component render, computed, and watchers all run inside an "effect"
effect(() => {
document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
エフェクトが実行されるとき、Vueはそれを「アクティブ」としてマークするため、実行中の任意のリアクティブな読み取りがそれに再びリンクされます。その後、依存関係を変更すると、影響を受けたエフェクトだけが再実行されます。
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1; // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5; // ❌ index assignment
this.arr.length = 0; // ❌ length changes
// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
プロキシは全体のオブジェクト（任意のキー、追加、削除、配列ミューテーション）をインターセプトし、Vue 2の周知の落とし穴を取り除きます——もうVue.setの回避策は必要ありません。
reactive(obj) → returns a Proxy of the object
ref(value) → returns an object { value } whose .value access is tracked
(so primitives can be reactive — Proxies only wrap objects)
トラック/トリガープロキシモデルを理解することで、なぜVueがそれほど効率的なのか（実際に変更されたデータに依存するエフェクトのみを更新する——細粒度リアクティビティ）と、なぜVue 2の古い制限が存在し、Vue 3では廃止されたのかが説明されます。
また、実用的なルールも明確にします：なぜreactiveがオブジェクトを必要とするのか（プロキシはプリミティブをラップできないため、refを使用）、そして、なぜreactiveを分割代入するとトラッキングが壊れるのか（プロキシのget/setインターセプションから値を切り離す）。