Apakah API Komposisi lain dalam Vue3?

1.shallowReactive dan shallowRef

• shallowReactive: Reaktif (responsif cetek) yang hanya memproses sifat terluar objek.

• shallowRef: hanya mengendalikan responsif jenis data asas dan tidak melakukan pemprosesan responsif objek.

• Bila hendak digunakan?

• Jika terdapat data objek, strukturnya agak dalam, tetapi apabila ia berubah, hanya atribut luar berubah= ==>

• Jika terdapat data objek, fungsi seterusnya tidak akan mengubah suai sifat dalam objek, tetapi menjana objek baharu untuk menggantikan ===> shallowRef.

2.baca sahaja dan cetekReadonly

• baca sahaja: Buat data responsif baca sahaja (baca dalam sahaja).

• shallowReadonly: Buat data responsif baca sahaja (cetek baca sahaja).

• Senario aplikasi: Apabila anda tidak mahu data diubah suai.

3.toRaw dan markRaw

• toRaw:

• Fungsi: menukar a reactiveobjek responsif yang dijana oleh ditukar menjadi objek biasa.

• Senario penggunaan: Digunakan untuk membaca objek biasa yang sepadan dengan objek responsif Semua operasi pada objek biasa ini tidak akan menyebabkan kemas kini halaman.

• markRaw:

• Fungsi: Tandakan objek supaya ia tidak akan menjadi objek responsif lagi.

• Senario aplikasi:

• Sesetengah nilai tidak boleh ditetapkan sebagai responsif, seperti perpustakaan pihak ketiga yang kompleks, dll.

• Melangkau transformasi reaktif boleh meningkatkan prestasi apabila memaparkan senarai besar dengan sumber data tidak boleh diubah.

4.customRef

• Fungsi: Buat rujukan tersuai dan kawal penjejakan pergantungan dan pencetusan kemas kini secara eksplisit.

• Mencapai kesan anti-goncang:

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

Atas ialah kandungan terperinci Apakah API Komposisi lain dalam Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!