Vue3 の他の作曲 API は何ですか?

1.shallowReactive とshallowRef

• shallowReactive: オブジェクトの最も外側のプロパティのみを処理するリアクティブ (浅いリアクティブ)。

• shallowRef: 基本データ型の応答性のみを処理し、オブジェクトの応答性処理は実行しません。

• いつ使用しますか?

• オブジェクト データがある場合、その構造は比較的深いですが、それが変更されると、外側の属性のみが変更されます= ==>shallowReactive。

• オブジェクト データがある場合、後続の関数はオブジェクト内の属性を変更しませんが、===> ShallowRef を置き換える新しいオブジェクトを生成します。

2.readonly とshallowReadonly

• readonly: レスポンシブ データを読み取り専用 (深い読み取り専用) にします。

• shallowReadonly: レスポンシブ データを読み取り専用にします (浅い読み取り専用)。

• アプリケーション シナリオ: データを変更したくない場合。

3.toRaw および markRaw

• toRaw:

• 関数: を変換します。 reactive によって生成された 応答オブジェクトは、通常のオブジェクトに変換されます。

• 使用シナリオ: 応答オブジェクトに対応する通常のオブジェクトを読み取るために使用されます。この通常のオブジェクトに対するすべての操作によってページが更新されることはありません。

• markRaw:

• 関数: オブジェクトが再び応答オブジェクトにならないように、オブジェクトにマークを付けます。

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

• 複雑なサードパーティ ライブラリなど、一部の値は応答するように設定すべきではありません。等

• リアクティブ変換をスキップすると、不変のデータ ソースを含む大きなリストをレンダリングする際のパフォーマンスが向上します。

4.customRef

• 関数: カスタム参照を作成し、その依存関係の追跡と更新のトリガーを明示的に制御します。

• 手ぶれ補正効果を実現:

<template>
	<input type="text" v-model="keyword">
	<h4>{{keyword}}</h4>
</template>

<script>
	import {ref,customRef} from &#39;vue&#39;
	export default {
		name:&#39;Demo&#39;,
		setup(){
			// let keyword = ref(&#39;hello&#39;) //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef(&#39;hello&#39;,500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

以上がVue3 の他の作曲 API は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。