Vue3中的shallowRef?和shallowReactive對(duì)比分析
shallowRef
只處理基本數(shù)據(jù)類(lèi)型的響應(yīng)式, 不進(jìn)行對(duì)象的響應(yīng)式處理。
<template>
<h1>{{ user.age }}</h1>
<button @click="user.age++">點(diǎn)擊+</button>
</template>
<script setup lang="ts">
import { reactive, ref, shallowReactive, shallowRef } from 'vue';
let user = shallowRef({
age: 0
});
</script>shallowReactive
只處理對(duì)象最外層屬性的響應(yīng)式（淺響應(yīng)式）
<template>
<h1>user.a.b {{ user.a.b }}</h1>
<button @click="user.a.b++">點(diǎn)擊+</button>
</template>
<script setup lang="ts">
import { reactive, ref, shallowReactive, shallowRef } from 'vue';
let user = shallowReactive({
age: 0,
a: {
b: 0
}
});
</script>
關(guān)于Vue3中shallowRef和shallowReactive的使用 可以參考下。
vue3的shallowRef()、shallowReactive()和shallowReadonly()
1.shallowReactive()：使用shallowReactive轉(zhuǎn)化的對(duì)象只有對(duì)象的第一層級(jí)有響應(yīng)式。
2.shallowRef()：使用shallowRef轉(zhuǎn)化的基本數(shù)據(jù)類(lèi)型和使用ref沒(méi)有差別，使用shallowRef轉(zhuǎn)化的對(duì)象都會(huì)失去響應(yīng)式。
3.shallowReadonly()：使用shallowReadonly轉(zhuǎn)化的對(duì)象，只會(huì)在對(duì)象第一層級(jí)才有只讀，除此之外都還具有響應(yīng)式。
3.運(yùn)用場(chǎng)景
如果有數(shù)據(jù)是別的組件傳過(guò)來(lái)的，并且要求該數(shù)據(jù)不可修改，可以使用readOnly來(lái)轉(zhuǎn)化該數(shù)據(jù)，防止你改動(dòng)了數(shù)據(jù)而影響別的組件。
到此這篇關(guān)于Vue3中的shallowRef 和shallowReactive的文章就介紹到這了,更多相關(guān)Vue3中shallowRef 和shallowReactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)(defineProperty表示不背這個(gè)鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)？defineProperty表示不背這個(gè)鍋，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過(guò)js插件定義展開(kāi)詳細(xì)文章介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
這篇文章通過(guò)實(shí)例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語(yǔ)言，下面這篇文章主要來(lái)和大家講講CodeMirror的應(yīng)用，感興趣的可以了解一下2023-06-06
Vue組件中的data必須是一個(gè)function的原因淺析
這篇文章主要介紹了Vue組件中的data必須是一個(gè)function的原因淺析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)
開(kāi)發(fā)離不開(kāi)權(quán)限,不同的用戶(hù)登錄,根據(jù)不同的權(quán)限,可以訪問(wèn)不同的管理目錄，本文主要介紹了vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
Vue el-table表格第一列序號(hào)與復(fù)選框hover切換方式
這篇文章主要介紹了Vue el-table表格第一列序號(hào)與復(fù)選框hover切換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
漏斗圖常用于可視化業(yè)務(wù)流程中的各個(gè)階段的轉(zhuǎn)換率,例如銷(xiāo)售漏斗或營(yíng)銷(xiāo)漏斗,它可以幫助用戶(hù)識(shí)別流程中的瓶頸和改進(jìn)機(jī)會(huì),本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下2024-07-07
基于vue的tab-list類(lèi)目切換商品列表組件的示例代碼
這篇文章主要介紹了基于vue的tab-list類(lèi)目切換商品列表組件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
解決Vue項(xiàng)目中tff報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決Vue項(xiàng)目中tff報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10