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

本篇內容介紹了“Vue3中其他的Composition API怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.shallowReactive 與 shallowRef

• shallowReactive：只處理對象最外層屬性的響應式（淺響應式）。

• shallowRef：只處理基本數據類型的響應式, 不進行對象的響應式處理。

• 什么時候使用?

• 如果有一個對象數據，結構比較深, 但變化時只是外層屬性變化 ===> shallowReactive。

• 如果有一個對象數據，后續功能不會修改該對象中的屬性，而是生新的對象來替換 ===> shallowRef。

2.readonly 與 shallowReadonly

• readonly: 讓一個響應式數據變為只讀的（深只讀）。

• shallowReadonly：讓一個響應式數據變為只讀的（淺只讀）。

• 應用場景: 不希望數據被修改時。

3.toRaw 與 markRaw

• toRaw：

• 作用：將一個由reactive生成的響應式對象轉為普通對象。

• 使用場景：用于讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。

• markRaw：

• 作用：標記一個對象，使其永遠不會再成為響應式對象。

• 應用場景:

• 有些值不應被設置為響應式的，例如復雜的第三方類庫等。

• 當渲染具有不可變數據源的大列表時，跳過響應式轉換可以提高性能。

4.customRef

• 作用：創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。

• 實現防抖效果：

<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準備好的內置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('hello',500) //使用程序員自定義的ref
			return {
				keyword
			}
		}
	}
</script>

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