這篇文章主要介紹了Vue3中的shallowRef和shallowReactive怎么使用的相關知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue3中的shallowRef和shallowReactive怎么使用文章都會有所收獲,下面我們一起來看看吧。
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供白沙黎族網(wǎng)站建設、白沙黎族做網(wǎng)站、白沙黎族網(wǎng)站設計、白沙黎族網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、白沙黎族企業(yè)網(wǎng)站模板建站服務,10多年白沙黎族做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡服務。
shallowRef 函數(shù),只處理基本類型數(shù)據(jù)。
shallowReactive 函數(shù),只處理第一層數(shù)據(jù)。
兩個在使用的時候都需要引入才可以。
上面說了是不是還是沒看懂?沒關系哈,先記住上面三條,然后詳細的說一下。
我們在之前的博客講過 ref 函數(shù)和 reactive 函數(shù),他們的作用是將數(shù)據(jù)轉(zhuǎn)換成響應式的數(shù)據(jù),在修改數(shù)據(jù)的時候,可以將數(shù)據(jù)實時展示在頁面上,基本數(shù)據(jù)也好,對象也好,都是這樣。
但是有一個問題呀,我們在把數(shù)據(jù)改為響應式數(shù)據(jù)的時候,不管是用 ref 函數(shù)還是使用 reactive 函數(shù),他倆都是深度監(jiān)聽,啥意思呢?就是 reactive 包裹的對象,就算有100層,也就是連續(xù)點一百個屬性那種,去修改最深層的數(shù)據(jù),也是可以監(jiān)聽到的,這樣的話就會存在問題了。
深度監(jiān)聽的問題:
無論 ref 函數(shù)還是 reactive 函數(shù)都是深度監(jiān)聽。
如果數(shù)據(jù)量過大,超級超級消耗性能。
如果我們不需要對數(shù)據(jù)進行深度監(jiān)聽的時候,就可以使用 shallowRef 函數(shù)和 shallowReactive 函數(shù)。
明白了嗎?不明白沒關系,我們通過幾個案例就知道了。
記住一點,shallowReactive 函數(shù),只能處理第一層數(shù)據(jù)。
假設我們頁面有一個個人信息展示,有名字、有年齡需要展示,我們數(shù)據(jù)是存在 boy 對象里面,然后 age 是在 boy 對象的 news 屬性下面,也就是深層,但是 name 是在 boy 對象下面,也就是第一層,我們有兩個按鈕,分別修改 name 和 age,看一下會有什么效果。
<template> <div> <h3>姓名:{{name}}</h3> <h3>年齡:{{news.age}}</h3> <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>
我們分別點擊兩個按鈕,看一下頁面變化。
通過效果,我們稍微總結一下:
shallowReactive只會包裝第一層的數(shù)據(jù)
默認情況它只能夠監(jiān)聽數(shù)據(jù)的第一層。
如果想更改多層的數(shù)據(jù),必須先更改第一層的數(shù)據(jù),然后在去更改其他層的數(shù)據(jù)。這樣視圖上的數(shù)據(jù)才會發(fā)生變化。
開頭已經(jīng)說過了,shallowRef 函數(shù),只能處理基本類型數(shù)據(jù),為啥呢,因為 shallowRef 函數(shù)監(jiān)聽的是.value 變化。并不是第一層的數(shù)據(jù)的變化。所以如果要更改 shallowRef 創(chuàng)建的數(shù)據(jù),應該 xxx.value = XXX。
看代碼:
<template> <div> <h3>姓名:{{boy}}</h3> <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>
點擊按鈕,修改 boy 的值。
通過上面的截圖可以看見,數(shù)據(jù)是可以正常修改的。
然后遺留了一個問題:shallowRef 函數(shù),只處理基本類型數(shù)據(jù) 嗎?
看下面的案例:
<template> <div> <h3>姓名:{{boy.name}}</h3> <h3>年齡:{{boy.news.age}}</h3> <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>
在這個代碼里面,我們用 shallowRef 包裹了一個對象, 然后在頁面顯示 name 和 age ,然后我們通過按鈕修改 name 和 age,看一下頁面的效果。
所以說呢,shallowRef 函數(shù),只能處理基本類型數(shù)據(jù)。
關于“Vue3中的shallowRef和shallowReactive怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“Vue3中的shallowRef和shallowReactive怎么使用”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:Vue3中的shallowRef和shallowReactive怎么使用
文章地址:http://muchs.cn/article28/gehocp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、App開發(fā)、網(wǎng)站建設、靜態(tài)網(wǎng)站、網(wǎng)站設計、用戶體驗
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)