Vue.js 3 (Composition API) での reactivity まとめ
Published at: 2022/12/27
- Vue における reactivity の目的は、 reactive なプロパティへのアクセスに副作用を依存関係という形でひもづけを行うこと。
- 副作用には render と watch がある。
- 以降、 reactive property access と呼ぶ。
- その直接の property たちがすべて reactive property であるとき、その object を reactive object と呼ぶ。
- Ref とは、 value という reactive property のみを持つ reactive object.
- toRef(s) と computed により、他の reactive property access に依存した Ref が定義される。
- computed の依存対象: その計算の最中にアクセスされた reactive property.
- toRef(s) の依存対象: ベースとなった reactive property.
- render は、その実行の最中にアクセスされた reactive property に対して、依存する。
- Vue は、 render が reactive に再実行されることで dom 更新を行う。
$propsや$attrsは reactive object として取り扱われ、複数回実行された親 render は、同じコンポーネントに対してはそれら props 等への代入のみを行う。- なので、 vue においては親の更新は、子供に対して props の reactive な変更によって伝播される。
- Vue は、再 render 結果の VDom の tag と key (もしあれば) によって同じコンポーネントかどうかを判定する。