Vue3中其他的Composition?API詳解
更新時(shí)間:2023年03月24日 14:49:10 作者:名之以父
這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.shallowReactive 與 shallowRef
- shallowReactive:只處理對象最外層屬性的響應(yīng)式(淺響應(yīng)式)。
- shallowRef:只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進(jìn)行對象的響應(yīng)式處理。
- 什么時(shí)候使用?
- 如果有一個(gè)對象數(shù)據(jù),結(jié)構(gòu)比較深, 但變化時(shí)只是外層屬性變化 ===> shallowReactive。
- 如果有一個(gè)對象數(shù)據(jù),后續(xù)功能不會修改該對象中的屬性,而是生新的對象來替換 ===> shallowRef。
2.readonly 與 shallowReadonly
- readonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(深只讀)。
- shallowReadonly:讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(淺只讀)。
- 應(yīng)用場景: 不希望數(shù)據(jù)被修改時(shí)。
3.toRaw 與 markRaw
- toRaw:
- 作用:將一個(gè)由
reactive
生成的響應(yīng)式對象轉(zhuǎn)為普通對象。 - 使用場景:用于讀取響應(yīng)式對象對應(yīng)的普通對象,對這個(gè)普通對象的所有操作,不會引起頁面更新。
- 作用:將一個(gè)由
- markRaw:
- 作用:標(biāo)記一個(gè)對象,使其永遠(yuǎn)不會再成為響應(yīng)式對象。
- 應(yīng)用場景:
- 有些值不應(yīng)被設(shè)置為響應(yīng)式的,例如復(fù)雜的第三方類庫等。
- 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí),跳過響應(yīng)式轉(zhuǎn)換可以提高性能。
4.customRef
- 作用:創(chuàng)建一個(gè)自定義的 ref,并對其依賴項(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過實(shí)例代碼給大家介紹vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07