詳解Vue3中shallowRef和shallowReactive的使用
嗯,怎么說(shuō)呢,其實(shí)這兩個(gè)函數(shù)并不是很常用,在開(kāi)發(fā)過(guò)程中基本上用不到,但是呢,我不寫我又感覺(jué)少點(diǎn)啥,所以說(shuō)就簡(jiǎn)單的說(shuō)一下吧,其實(shí)不看也可以哈。
shallowRef 和 shallowReactive
- shallowRef 函數(shù),只處理基本類型數(shù)據(jù)。
- shallowReactive 函數(shù),只處理第一層數(shù)據(jù)。
- 兩個(gè)在使用的時(shí)候都需要引入才可以。
上面說(shuō)了是不是還是沒(méi)看懂?沒(méi)關(guān)系哈,先記住上面三條,然后詳細(xì)的說(shuō)一下。
我們?cè)谥暗牟┛椭v過(guò) ref 函數(shù)和 reactive 函數(shù),他們的作用是將數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式的數(shù)據(jù),在修改數(shù)據(jù)的時(shí)候,可以將數(shù)據(jù)實(shí)時(shí)展示在頁(yè)面上,基本數(shù)據(jù)也好,對(duì)象也好,都是這樣。
但是有一個(gè)問(wèn)題呀,我們?cè)诎褦?shù)據(jù)改為響應(yīng)式數(shù)據(jù)的時(shí)候,不管是用 ref 函數(shù)還是使用 reactive 函數(shù),他倆都是深度監(jiān)聽(tīng),啥意思呢?就是 reactive 包裹的對(duì)象,就算有100層,也就是連續(xù)點(diǎn)一百個(gè)屬性那種,去修改最深層的數(shù)據(jù),也是可以監(jiān)聽(tīng)到的,這樣的話就會(huì)存在問(wèn)題了。
深度監(jiān)聽(tīng)的問(wèn)題:
- 無(wú)論 ref 函數(shù)還是 reactive 函數(shù)都是深度監(jiān)聽(tīng)。
- 如果數(shù)據(jù)量過(guò)大,超級(jí)超級(jí)消耗性能。
- 如果我們不需要對(duì)數(shù)據(jù)進(jìn)行深度監(jiān)聽(tīng)的時(shí)候,就可以使用 shallowRef 函數(shù)和 shallowReactive 函數(shù)。
明白了嗎?不明白沒(méi)關(guān)系,我們通過(guò)幾個(gè)案例就知道了。
使用 shallowReactive 非深度監(jiān)聽(tīng)
記住一點(diǎn),shallowReactive 函數(shù),只能處理第一層數(shù)據(jù)。
假設(shè)我們頁(yè)面有一個(gè)個(gè)人信息展示,有名字、有年齡需要展示,我們數(shù)據(jù)是存在 boy 對(duì)象里面,然后 age 是在 boy 對(duì)象的 news 屬性下面,也就是深層,但是 name 是在 boy 對(duì)象下面,也就是第一層,我們有兩個(gè)按鈕,分別修改 name 和 age,看一下會(huì)有什么效果。
<template> <div> <h1>姓名:{{name}}</h1> <h1>年齡:{{news.age}}</h1> <button @click="btn">修改name</button> <button @click="btn2">修改age</button> </div> </template> <script> import { shallowReactive, toRefs } from "vue"; export default { name: "App", setup() { const boy = shallowReactive({ name: "我是????.", news: { birthday: "2012-10-14", age: 10 } }); const btn = () => { boy.name = "????."; }; const btn2 = () => { boy.news.age++; }; return { ...toRefs(boy), btn, btn2 }; } }; </script>
我們分別點(diǎn)擊兩個(gè)按鈕,看一下頁(yè)面變化。
通過(guò)效果,我們稍微總結(jié)一下:
- shallowReactive只會(huì)包裝第一層的數(shù)據(jù)
- 默認(rèn)情況它只能夠監(jiān)聽(tīng)數(shù)據(jù)的第一層。
- 如果想更改多層的數(shù)據(jù),必須先更改第一層的數(shù)據(jù),然后在去更改其他層的數(shù)據(jù)。這樣視圖上的數(shù)據(jù)才會(huì)發(fā)生變化。
使用 shallowRef 非深度監(jiān)聽(tīng)
開(kāi)頭已經(jīng)說(shuō)過(guò)了,shallowRef 函數(shù),只能處理基本類型數(shù)據(jù),為啥呢,因?yàn)?shallowRef 函數(shù)監(jiān)聽(tīng)的是.value 變化。并不是第一層的數(shù)據(jù)的變化。所以如果要更改 shallowRef 創(chuàng)建的數(shù)據(jù),應(yīng)該 xxx.value = XXX。
看代碼:
<template> <div> <h1>姓名:{{boy}}</h1> <button @click="btn">修改boy</button> </div> </template> <script> import { shallowRef } from "vue"; export default { name: "App", setup() { const boy = shallowRef("我是????."); const btn = () => { boy.value = "????."; }; return { boy, btn }; } }; </script>
點(diǎn)擊按鈕,修改 boy 的值。
通過(guò)上面的截圖可以看見(jiàn),數(shù)據(jù)是可以正常修改的。
然后遺留了一個(gè)問(wèn)題:shallowRef 函數(shù),只處理基本類型數(shù)據(jù) 嗎?
看下面的案例:
<template> <div> <h1>姓名:{{boy.name}}</h1> <h1>年齡:{{boy.news.age}}</h1> <button @click="btn">修改name</button> <button @click="btn2">修改age</button> </div> </template> <script> import { shallowRef } from "vue"; export default { name: "App", setup() { const boy = shallowRef({ name: "我是????.", news: { birthday: "2012-10-14", age: 10 } }); const btn = () => { boy.value.name = "????."; }; const btn2 = () => { boy.value.news.age++; }; return { boy, btn, btn2 }; } }; </script>
在這個(gè)代碼里面,我們用 shallowRef 包裹了一個(gè)對(duì)象, 然后在頁(yè)面顯示 name 和 age ,然后我們通過(guò)按鈕修改 name 和 age,看一下頁(yè)面的效果。
所以說(shuō)呢,shallowRef 函數(shù),只能處理基本類型數(shù)據(jù)。
好了,今天的內(nèi)容大體就這么多,其實(shí)這兩個(gè)函數(shù)不怎么用,知道就好,萬(wàn)一用到也好明白怎么用。
到此這篇關(guān)于詳解Vue3中shallowRef和shallowReactive的使用的文章就介紹到這了,更多相關(guān)Vue3 shallowRef shallowReactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用vscode開(kāi)發(fā)vue應(yīng)用的方法步驟
這篇文章主要介紹了用vscode開(kāi)發(fā)vue應(yīng)用的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05axios+vue請(qǐng)求時(shí)攜帶cookie的方法實(shí)例
做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請(qǐng)求時(shí),對(duì)用戶登陸狀態(tài)進(jìn)行判斷,需要在請(qǐng)求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下2022-09-09vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例
這篇文章主要介紹了vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09如何在ElementUI的上傳組件el-upload中設(shè)置header
這篇文章主要介紹了如何在ElementUI的上傳組件el-upload中設(shè)置header,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟
Vite是一個(gè)快速的構(gòu)建工具,Vue3是一個(gè)流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05uniapp中設(shè)置全局頁(yè)面背景色的簡(jiǎn)單教程
uni-app如何設(shè)置頁(yè)面全局背景色,其實(shí)非常簡(jiǎn)單,一句話即可,但有時(shí)候也會(huì)踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁(yè)面背景色的相關(guān)資料,需要的朋友可以參考下2023-03-03