Vue 関数の比較: toRaw() と markRaw() の使用

この記事は、vue 関数を学習し、vueJs の toRaw 関数と markRaw 関数を比較するのに役立ちます。

プロジェクトでは、特別なニーズにより、レスポンシブ データを通常のプリミティブ型データに変更する必要がある場合があります。

Vueでは、通常データ型のデータをレスポンシブ型データに変更することができ、同時にレスポンシブ型データを通常型データに変更することもできます

はい 使用済みデータのパフォーマンスを向上させるため

toRaw() 関数

は reactive 応答データを受信し、応答データを一般的なタイプのデータに変換し、非応答データに変換します。 -応答データはオブジェクトの復元に相当し、reactive は運用に相当しますが、ref 応答データでは機能しません。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

reactive によって生成されたレスポンシブ オブジェクトを通常の (オリジナルの) オブジェクトに変換します。 ) オブジェクト

toRaw() は、reactive()、readonly()、shallowReactive() によって返されます。または shallowReadonly()作成されたプロキシに対応する元のオブジェクト

これは、プロキシ アクセス/追跡オーバーヘッドを発生させずに一時的に読み取り、または変更をトリガーせずに書き込みを行うために使用できる特別なメソッドです。公式ドキュメントでは、元のオブジェクトへの永続的な参照を保存することは推奨されていません。

使用シナリオ: 応答オブジェクトの読み取りに使用される共通オブジェクト、この共通オブジェクトに対するすべての操作。ページは更新されません

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo)  // true

Note

オブジェクトの場合、後続の動的に追加された属性で、オブジェクト全体が外部に公開されていない場合は、テンプレートの新しい属性 変数は無効です (setup 関数フォームの場合)

markRaw() function

生データを受信し、オブジェクトにマークを付けます。レスポンシブ オブジェクトになることはありません。つまり、ロジック内でデータが変更されても、ページは更新されません。

オブジェクトをプロキシに変換されないものとしてマークし、オブジェクト自体を返します

アプリケーション シナリオ:

[1]。複雑なサードパーティ ライブラリや Vue コンポーネント オブジェクトなど、一部の値は応答するように設定しないでください。

[2]。不変のデータ ソースを使用して大きなリストをレンダリングする場合、リアクティブな変換をスキップするとパフォーマンスが向上する可能性があります

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw() および shallowReactive()この浅いスタイルAPIを使用すると、デフォルトの深い応答/読み取り専用変換を選択的に回避し、状態関係スペクトルに元の非プロキシ オブジェクトを埋め込むことができます

Set を入れ子にした場合マークを外した元のオブジェクトをリアクティブ オブジェクトに変換し、再度アクセスすると、プロキシ バージョンが取得されます。これは、オブジェクト ID のリスクにつながる可能性があります。

つまり、オブジェクト ID 操作の依存関係を実行しますが、元のバージョンの両方を使用します。および同じオブジェクトのプロキシ バージョン

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false

summary

ref()andreactive() 非応答型データを次のように変換します。応答データ、toRaw() および markRaw() は応答データの復元と同等であり、応答データを非応答データ

および ## に変換します。 #toRaw は、応答性の高いオブジェクト タイプのデータに対してのみ機能します。応答性の高いデータを非応答性のデータに変換する必要がある場合は、純粋なデータにのみ使用されます。ページの更新を行わずに、レンダリングで toRaw を使用できます。または markRaw()

を使用すると、多くの場合、データのパフォーマンスが向上します

(学習ビデオの共有 :

vuejs 入門チュートリアル 、基本プログラミング ビデオ)

以上がVue 関数の比較: toRaw() と markRaw() の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。