shallowRef 函數,只處理基本類型資料。
shallowReactive 函數,只處理第一層資料。
兩個在使用的時候都需要引入才可以。
上面說了是不是還是沒看懂?沒關係哈,先記住上面三條,然後詳細的說一下。
我們在之前的部落格講過ref 函數和reactive 函數,他們的作用是將數據轉換成響應式的數據,在修改數據的時候,可以將數據即時展示在頁面上,基本數據也好,對像也好,都是這樣。
但有一個問題呀,我們在把資料改為響應式資料的時候,不管是用 ref 函數還是使用 reactive 函數,他兩個都是深度監聽,啥意思呢?就是 reactive 包裹的對象,就算有100層,也就是連續點一百個屬性那種,去修改最深層的數據,也是可以監聽到的,這樣的話就會存在問題了。
深度監聽的問題:
不論 ref 函式或 reactive 函式都是深度監聽。
如果資料量過大,超級超級消耗效能。
如果我們不需要對資料進行深度監聽的時候,就可以使用 shallowRef 函數和 shallowReactive 函數。
明白了嗎?不明白沒關係,我們透過幾個案例就知道了。
記住一點,shallowReactive 函數,只能處理第一層資料。
假設我們頁面有一個個人資訊展示,有名字、有年齡需要展示,我們資料是存在boy 物件裡面,然後age 是在boy 物件的news 屬性下面,也就是深層,但是name 是在boy 物件下面,也就是第一層,我們有兩個按鈕,分別修改name 和age,看看會有什麼效果。
<template> <div> <h2>姓名:{{name}}</h2> <h2>年龄:{{news.age}}</h2> <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只會包裝第一層的資料
預設情況它只能夠監聽資料的第一層。
如果想更改多層的數據,必須先更改第一層的數據,然後在去更改其他層的數據。這樣視圖上的資料才會改變。
開頭已經說過了,shallowRef 函數,只能處理基本類型資料,為啥呢,因為shallowRef 函數監聽的是.value 變化。並不是第一層的數據的變化。所以如果要更改 shallowRef 創建的數據,應該 xxx.value = XXX。
看程式碼:
<template> <div> <h2>姓名:{{boy}}</h2> <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 的值。
透過上面的截圖可以看見,資料是可以正常修改的。
然後遺留了一個問題:shallowRef 函數,只處理基本類型資料 嗎?
看下面的案例:
<template> <div> <h2>姓名:{{boy.name}}</h2> <h2>年龄:{{boy.news.age}}</h2> <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 函數,只能處理基本類型資料。
以上是Vue3中shallowRef和shallowReactive該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!