Vue3中其他的Composition?API怎么使用

本篇內(nèi)容介紹了“Vue3中其他的Composition API怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.shallowReactive 與 shallowRef

• shallowReactive：只處理對(duì)象最外層屬性的響應(yīng)式（淺響應(yīng)式）。

• shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進(jìn)行對(duì)象的響應(yīng)式處理。

• 什么時(shí)候使用?

• 如果有一個(gè)對(duì)象數(shù)據(jù)，結(jié)構(gòu)比較深, 但變化時(shí)只是外層屬性變化 ===> shallowReactive。

• 如果有一個(gè)對(duì)象數(shù)據(jù)，后續(xù)功能不會(huì)修改該對(duì)象中的屬性，而是生新的對(duì)象來(lái)替換 ===> shallowRef。

2.readonly 與 shallowReadonly

• readonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（深只讀）。

• shallowReadonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（淺只讀）。

• 應(yīng)用場(chǎng)景: 不希望數(shù)據(jù)被修改時(shí)。

3.toRaw 與 markRaw

• toRaw：

• 作用：將一個(gè)由reactive生成的響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象。

• 使用場(chǎng)景：用于讀取響應(yīng)式對(duì)象對(duì)應(yīng)的普通對(duì)象，對(duì)這個(gè)普通對(duì)象的所有操作，不會(huì)引起頁(yè)面更新。

• markRaw：

• 作用：標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象。

• 應(yīng)用場(chǎng)景:

• 有些值不應(yīng)被設(shè)置為響應(yīng)式的，例如復(fù)雜的第三方類庫(kù)等。

• 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí)，跳過(guò)響應(yīng)式轉(zhuǎn)換可以提高性能。

4.customRef

• 作用：創(chuàng)建一個(gè)自定義的 ref，并對(duì)其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制。

• 實(shí)現(xiàn)防抖效果：

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue準(zhǔn)備好的內(nèi)置ref
			//自定義一個(gè)myRef
			function myRef(value,delay){
				let timer
				//通過(guò)customRef去實(shí)現(xiàn)自定義
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告訴Vue這個(gè)value值是需要被“追蹤”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告訴Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序員自定義的ref
			return {
				keyword
			}
		}
	}
</script>

“Vue3中其他的Composition API怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！