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

以上是Vue3中其他的Composition API有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！