vue3のレスポンシブ処理 ---> Reactive

前文

object array map set weakmap weakset リアクティブクラスのapiは主に複雑なタイプのデータをレスポンシブなデータに処理する機能を提供します。実際、この複雑なタイプは5種類の中に含まれ、データを処理するためにリアクティブクラスのapiを呼び出すとき、次のような判定があります。

if (!canObserve(target)) {
 return target
}
// 以下はcanObserverの実装である。
const canObserve = (value: Target): boolean => {
 return (
 !value[ReactiveFlags.SKIP] && // オブジェクトをスキップする必要があり、リアクティブにできないことを示す。例えば、カスタムコンポーネント
 isObservableType(toRawType(value)) &&
 !Object.isFrozen(value) // このオブジェクトはオブジェクト.frozen() 処理され、非厳密モードで処理された代入はエラーを報告しないが、成功しない。
 )
}

分析は以下の通り：

1. value[ReactiveFlags.SKIP]SKIP値 '__v_skip' は、この属性を持つ値がレスポンシブなデータに変換されないことを意味します。変換したくないデータに手動でこの属性を追加すると、レスポンシブなデータになります。

2. isObservableType(toRawType(value)) この文章はもう少し複雑で、細かく分けることができます。

   Object.toString.call(target) a. toRawType(value): このメソッドは、入力された値の生の型を取得します。例えば、[] ===> Arrayから取得され、インターセプトされます。 b. isObservableType: このメソッドは、型が型の1つであるかどうかを判定します。 object array map set weakmap weakset b.isObservableTypeは、それが型の1つであるかどうかを判断するもので、もしそうであれば、それは要件を満たしており、作成することができます。 この種の制限はまた、vue3が、本当に何らかのデータ構造をレスポンシブにしたいときに、すべてを変換するのではなく、リアクティブクラスのapiを使用することを望んでいることを示しています。

api

vue3はreadonlyデータを提案します。これは、データが読み取り専用で変更できないことを意味します。したがって、レスポンシブ処理のためのapiは、通常バージョンと readonlyバージョンの2つを持っています。この2つのデータ型は相互に排他的であり、相互に変換することはできませんし、両方のデータ型を同時に持つこともできません。

reactive および readonly

1つは通常のレスポンシブバージョンで、もう1つは必要に応じて使用できる読み取り専用バージョンです。

注意: これら2つのAPIは、より深いレベルでデータを処理します。もし属性がオブジェクトであっても、レスポンシブデータとして処理されます。

reactiveShallow および readonlyShallow

マネーレスポンス版は、通常のレスポンシブ版とリードオンリー版があり、必要に応じて撮影されます。

サマリー

上記の2つのAPIは、1つ目がディープコピー、2つ目が シャローコピーと解釈できます。

データ型apiの決定

ここでの判定APIは、表面上のセマンティクスです。ここでは詳細には触れず、次のセクションでvue3のプロキシを使ったsetとgetについて分析します。

1. isReactive
2. isReadonly
3. isProxy
4. toRow
5. makRow