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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue生態(tài)的新成員Pinia的詳細介紹
本文主要介紹了Vue生態(tài)的新成員Pinia的詳細介紹，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
vue動態(tài)綁定v-model屬性名方式
這篇文章主要介紹了vue動態(tài)綁定v-model屬性名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue使用watch監(jiān)聽一個對象中的屬性的實現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽一個對象中的屬性的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
vue3時間插件之Moment.js使用教程
這篇文章主要給大家介紹了關于vue3時間插件之Moment.js使用的相關資料,需要的朋友可以參考下
2023-09-09
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue3 封裝 element-plus 圖標選擇器實現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標選擇器,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
Vue+Elementui el-tree樹只能選擇子節(jié)點并且支持檢索功能
這篇文章給大家介紹了Vue+Element UI el-tree樹只能選擇子節(jié)點并且支持檢索的文章,通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-12-12
Vue如何引用public中的js文件
這篇文章主要介紹了Vue如何引用public中的js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue使用Vue Elements實現(xiàn)文件預覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗越來越重要,而文件上傳和文件預覽是最常見的交互場景之一,本文將詳細介紹如何在 Vue 項目中使用 Vue Elements 來實現(xiàn)文件預覽的功能,包括基本使用方法、常見實例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下
2025-01-01
vue-cli創(chuàng)建vue項目的詳細步驟記錄
vue.cli是vue中的項目構造工具,是一個npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關于利用vue-cli創(chuàng)建vue項目的詳細步驟,需要的朋友可以參考下
2022-06-06