Vue3中的shallowRef?和shallowReactive對比分析

更新時間：2023年01月05日 09:37:10 作者：疆~

這篇文章主要介紹了Vue3中的shallowRef?和shallowReactive,通過示例代碼逐一對他們的使用做的詳細介紹，文末補充介紹了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用，需要的朋友可以參考下

shallowRef

只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進行對象的響應(yīng)式處理。

<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

只處理對象最外層屬性的響應(yīng)式（淺響應(yīng)式）

  <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>

關(guān)于Vue3中shallowRef和shallowReactive的使用可以參考下。

vue3的shallowRef()、shallowReactive()和shallowReadonly()

1.shallowReactive()：使用shallowReactive轉(zhuǎn)化的對象只有對象的第一層級有響應(yīng)式。

2.shallowRef()：使用shallowRef轉(zhuǎn)化的基本數(shù)據(jù)類型和使用ref沒有差別，使用shallowRef轉(zhuǎn)化的對象都會失去響應(yīng)式。

3.shallowReadonly()：使用shallowReadonly轉(zhuǎn)化的對象，只會在對象第一層級才有只讀，除此之外都還具有響應(yīng)式。

3.運用場景

如果有數(shù)據(jù)是別的組件傳過來的，并且要求該數(shù)據(jù)不可修改，可以使用readOnly來轉(zhuǎn)化該數(shù)據(jù)，防止你改動了數(shù)據(jù)而影響別的組件。

到此這篇關(guān)于Vue3中的shallowRef 和shallowReactive的文章就介紹到這了,更多相關(guān)Vue3中shallowRef 和shallowReactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ssm+vue前后端分離框架整合實現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實現(xiàn)(附源碼)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
Vue中父子組件的值傳遞與方法傳遞
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
Vue點擊切換顏色的方法
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用Vue動態(tài)生成form表單的實例代碼
這篇文章主要介紹了使用Vue動態(tài)生成form表單的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-04-04
vue3使用ref的性能警告問題
這篇文章主要介紹了vue3使用ref的性能警告問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
一次VUE項目中遇到XSS攻擊的實戰(zhàn)記錄
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2021-12-12
vue菜單欄聯(lián)動內(nèi)容頁面tab的實現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動內(nèi)容頁面tab的實現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動,當點擊左側(cè)的菜單,右側(cè)會展示對應(yīng)的tab,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
Vue中created和mounted使用詳解
Vue中生命周期包括多個階段,如created和mounted,每階段有特定鉤子函數(shù),生命周期與瀏覽器渲染過程密切相關(guān),了解這些可以優(yōu)化頁面渲染和數(shù)據(jù)處理,created階段適用于數(shù)據(jù)初始化,而mounted階段適合進行DOM操作和頁面渲染后的處理
2024-10-10
Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效
Vue.js中的watch選項用于監(jiān)聽Vue實例上某個特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關(guān)于Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
vue element table表格相同名稱列合并方式
這篇文章主要介紹了vue element table表格相同名稱列合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10