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