Quelles sont les autres API de composition dans Vue3 ?

1.shallowReactive et ShallowRef

• shallowReactive : Réactif (réactif peu profond) qui traite uniquement les propriétés les plus externes de l'objet.

• shallowRef : gère uniquement la réactivité des types de données de base et n'effectue pas de traitement réactif des objets.

• Quand utiliser ?

• S'il y a une donnée d'objet, la structure est relativement profonde, mais lorsqu'elle change, seuls les attributs externes changent ===> ShallowReactive.

• S'il existe des données d'objet, les fonctions suivantes ne modifieront pas les attributs de l'objet, mais généreront un nouvel objet pour remplacer ===> ShallowRef.

2.readonly et ShallowReadonly

• readonly : Créez des données réactives en lecture seule (lecture seule approfondie).

• shallowReadonly : créez des données réactives en lecture seule (lecture seule peu profonde).

• Scénario d'application : Lorsque vous ne souhaitez pas que les données soient modifiées.

3.toRaw et markRaw

• toRaw :

• Fonction : Convertir un reactiveobjet réactif généré par en un objet normal.

• Scénario d'utilisation : Utilisé pour lire l'objet ordinaire correspondant à l'objet responsive. Toutes les opérations sur cet objet ordinaire n'entraîneront pas de mises à jour de page.

• markRaw :

• Fonction : Marquer un objet pour qu'il ne redevienne plus jamais un objet responsive.

• Scénarios d'application :

• Certaines valeurs ne doivent pas être définies pour être réactives, comme les bibliothèques tierces complexes, etc.

• Ignorer les transformations réactives peut améliorer les performances lors du rendu de grandes listes avec des sources de données immuables.

4.customRef

• Fonction : Créez une référence personnalisée et contrôlez explicitement son suivi des dépendances et le déclenchement de la mise à jour.

• Obtenez un effet anti-secousse :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!