Was sind die anderen Kompositions-APIs in Vue3?

1.shallowReactive und flachRef

• shallowReactive: Reaktiv (flach reaktiv), das nur die äußersten Eigenschaften des Objekts verarbeitet.

• shallowRef: Behandelt nur die Reaktionsfähigkeit grundlegender Datentypen und führt keine reaktionsfähige Verarbeitung von Objekten durch.

• Wann verwenden?

• Wenn es Objektdaten mit tiefer Struktur gibt , Aber wenn es sich ändert, ändern sich nur die äußeren Eigenschaften ===> flachReactive.

• Wenn Objektdaten vorhanden sind, ändern nachfolgende Funktionen die Eigenschaften im Objekt nicht, sondern generieren ein neues Objekt zum Ersetzen von ===> flachRef. #? nur (tief schreibgeschützt).

• Anwendungsszenario: Wenn Sie nicht möchten, dass die Daten geändert werden.

• 3. toRaw und markRaw #
  Funktion: Konvertieren eines
responsiven Objekts
• generiert von

  in ein

  gewöhnliches Objekt
.

Verwendungsszenario: Wird zum Lesen des gewöhnlichen Objekts verwendet, das dem reagierenden Objekt entspricht. Alle Vorgänge an diesem gewöhnlichen Objekt führen nicht zu Seitenaktualisierungen.
markRaw:

• reactiveFunktion: Markieren Sie ein Objekt, um es zu erstellen Seien Sie nie wieder ein reaktives Objekt.

Anwendungsszenario:

Einige Werte sollten nicht als responsiv eingestellt werden, Zum Beispiel komplexe Klassenbibliotheken von Drittanbietern usw.
Das Überspringen reaktiver Transformationen kann die Leistung beim Rendern großer Listen mit unveränderlichen Datenquellen verbessern.

• 4.customRef

• Funktion: Erstellen Sie eine benutzerdefinierte Referenz und verfolgen Sie deren Abhängigkeiten und aktualisieren Sie die Auslösung für explizite Referenzen Kontrolle.

• Anti-Shake-Effekt erzielen:

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

  Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas sind die anderen Kompositions-APIs in Vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!