Vue3中其他的Composition?API詳解
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ì)象來替換 ===> 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è)面更新。
- 作用:將一個(gè)由
- 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í),跳過響應(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">
<h3>{{keyword}}</h3>
</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
//通過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>
到此這篇關(guān)于Vue3中其他的Composition API的文章就介紹到這了,更多相關(guān)Vue3 Composition API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過實(shí)例代碼給大家介紹vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue插件v-touch的坑及解決(不能上下滑動(dòng))
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03

