Vue3中其他的Composition?API詳解

更新時間：2023年03月24日 14:49:10 作者：名之以父

這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.shallowReactive 與 shallowRef

shallowReactive：只處理對象最外層屬性的響應式（淺響應式）。
shallowRef：只處理基本數(shù)據(jù)類型的響應式, 不進行對象的響應式處理。
什么時候使用?
- 如果有一個對象數(shù)據(jù)，結構比較深, 但變化時只是外層屬性變化 ===> shallowReactive。
- 如果有一個對象數(shù)據(jù)，后續(xù)功能不會修改該對象中的屬性，而是生新的對象來替換 ===> shallowRef。

2.readonly 與 shallowReadonly

readonly: 讓一個響應式數(shù)據(jù)變?yōu)橹蛔x的（深只讀）。
shallowReadonly：讓一個響應式數(shù)據(jù)變?yōu)橹蛔x的（淺只讀）。
應用場景: 不希望數(shù)據(jù)被修改時。

3.toRaw 與 markRaw

toRaw：
- 作用：將一個由reactive生成的響應式對象轉為普通對象。
- 使用場景：用于讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。
markRaw：
- 作用：標記一個對象，使其永遠不會再成為響應式對象。
- 應用場景:
有些值不應被設置為響應式的，例如復雜的第三方類庫等。
當渲染具有不可變數(shù)據(jù)源的大列表時，跳過響應式轉換可以提高性能。

4.customRef

作用：創(chuàng)建一個自定義的 ref，并對其依賴項跟蹤和更新觸發(fā)進行顯式控制。
實現(xiàn)防抖效果：

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue準備好的內(nèi)置ref
			//自定義一個myRef
			function myRef(value,delay){
				let timer
				//通過customRef去實現(xiàn)自定義
				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的文章就介紹到這了,更多相關Vue3 Composition API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: