vue3.x?的shallowReactive?與?shallowRef?使用場(chǎng)景分析
在 Vue 3.x 中，shallowReactive 和 shallowRef 是兩個(gè)用于創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的 API。它們與 reactive 和 ref 類(lèi)似，但在處理嵌套對(duì)象時(shí)的行為有所不同。以下是它們的詳細(xì)解讀和示例。
1. shallowReactive
作用
shallowReactive 創(chuàng)建一個(gè)淺層響應(yīng)式對(duì)象，只有對(duì)象的頂層屬性是響應(yīng)式的，嵌套對(duì)象的屬性不會(huì)轉(zhuǎn)換為響應(yīng)式。
使用場(chǎng)景
- 當(dāng)你只需要對(duì)象的頂層屬性是響應(yīng)式，而不關(guān)心嵌套對(duì)象的響應(yīng)性時(shí)。
- 當(dāng)嵌套對(duì)象的響應(yīng)性轉(zhuǎn)換可能帶來(lái)性能開(kāi)銷(xiāo)時(shí)。
示例
import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
foo: 1,
nested: {
bar: 2,
},
});
effect(() => {
console.log('foo changed:', state.foo); // 響應(yīng)式
});
effect(() => {
console.log('nested.bar changed:', state.nested.bar); // 非響應(yīng)式
});
state.foo = 10; // 觸發(fā)第一個(gè) effect
state.nested.bar = 20; // 不會(huì)觸發(fā)第二個(gè) effect解釋?zhuān)?/strong>
state.foo是響應(yīng)式的，修改它會(huì)觸發(fā)依賴(lài)更新。state.nested.bar不是響應(yīng)式的，修改它不會(huì)觸發(fā)依賴(lài)更新。
2. shallowRef
作用
shallowRef 創(chuàng)建一個(gè)淺層響應(yīng)式引用，只有 .value 屬性本身是響應(yīng)式的，而 .value 內(nèi)部的屬性不會(huì)轉(zhuǎn)換為響應(yīng)式。
使用場(chǎng)景
- 當(dāng)你只需要
.value是響應(yīng)式的，而不關(guān)心.value內(nèi)部屬性的響應(yīng)性時(shí)。 - 當(dāng)
.value是一個(gè)復(fù)雜對(duì)象，且不需要深度監(jiān)聽(tīng)時(shí)。
示例
import { shallowRef, effect } from 'vue';
const count = shallowRef({
value: 1,
});
effect(() => {
console.log('count changed:', count.value.value); // 非響應(yīng)式
});
count.value.value = 10; // 不會(huì)觸發(fā) effect
count.value = { value: 20 }; // 觸發(fā) effect解釋?zhuān)?/strong>
count.value是響應(yīng)式的，修改它會(huì)觸發(fā)依賴(lài)更新。count.value.value不是響應(yīng)式的，但直接修改count.value會(huì)觸發(fā)依賴(lài)更新。
3. shallowReactive 與 shallowRef 的區(qū)別
| 特性 | shallowReactive | shallowRef |
|---|---|---|
| 作用對(duì)象 | 對(duì)象 | 任意值（通常用于對(duì)象或復(fù)雜數(shù)據(jù)） |
| 響應(yīng)式范圍 | 只有頂層屬性是響應(yīng)式的 | 只有 .value 是響應(yīng)式的 |
| 嵌套對(duì)象處理 | 嵌套對(duì)象的屬性不是響應(yīng)式的 | .value 內(nèi)部的屬性不是響應(yīng)式的 |
| 典型使用場(chǎng)景 | 只需要頂層屬性響應(yīng)式的對(duì)象 | 只需要 .value 響應(yīng)式的引用 |
4. shallowReactive 與 reactive 的對(duì)比
reactive 的深度響應(yīng)式
import { reactive, effect } from 'vue';
const state = reactive({
foo: 1,
nested: {
bar: 2,
},
});
effect(() => {
console.log('nested.bar changed:', state.nested.bar); // 響應(yīng)式
});
state.nested.bar = 20; // 觸發(fā) effectreactive 會(huì)將整個(gè)對(duì)象及其嵌套屬性都轉(zhuǎn)換為響應(yīng)式。
shallowReactive 的淺層響應(yīng)式
import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
foo: 1,
nested: {
bar: 2,
},
});
effect(() => {
console.log('nested.bar changed:', state.nested.bar); // 非響應(yīng)式
});
state.nested.bar = 20; // 不會(huì)觸發(fā) effectshallowReactive 只將頂層屬性轉(zhuǎn)換為響應(yīng)式，嵌套屬性保持不變。
5. shallowRef 與 ref 的對(duì)比
ref 的深度響應(yīng)式
import { ref, effect } from 'vue';
const count = ref({
value: 1,
});
effect(() => {
console.log('count.value changed:', count.value.value); // 響應(yīng)式
});
count.value.value = 10; // 觸發(fā) effectref 會(huì)將 .value 及其內(nèi)部屬性都轉(zhuǎn)換為響應(yīng)式。
shallowRef 的淺層響應(yīng)式
import { shallowRef, effect } from 'vue';
const count = shallowRef({
value: 1,
});
effect(() => {
console.log('count.value changed:', count.value.value); // 非響應(yīng)式
});
count.value.value = 10; // 不會(huì)觸發(fā) effect
count.value = { value: 20 }; // 觸發(fā) effectshallowRef 只將 .value 本身轉(zhuǎn)換為響應(yīng)式，內(nèi)部屬性保持不變。
6. 使用場(chǎng)景總結(jié)
shallowReactive
- 適用于只需要頂層屬性響應(yīng)式的對(duì)象。
- 例如：表單數(shù)據(jù)的頂層字段。
shallowRef
- 適用于只需要
.value響應(yīng)式的引用。 - 例如：DOM 元素的引用或不需要深度監(jiān)聽(tīng)的對(duì)象。
7. 注意事項(xiàng)
性能優(yōu)化：
shallowReactive 和 shallowRef 可以減少不必要的響應(yīng)式轉(zhuǎn)換，從而提高性能。
嵌套對(duì)象的響應(yīng)性：
如果需要嵌套對(duì)象的響應(yīng)性，應(yīng)該使用 reactive 或 ref。
.value 的使用：
shallowRef 的 .value 是響應(yīng)式的，但 .value 內(nèi)部的屬性不是響應(yīng)式的。
8. 總結(jié)
shallowReactive和shallowRef是 Vue 3 提供的淺層響應(yīng)式 API。shallowReactive只將對(duì)象的頂層屬性轉(zhuǎn)換為響應(yīng)式。shallowRef只將.value本身轉(zhuǎn)換為響應(yīng)式。- 它們適用于需要優(yōu)化性能或不需要深度響應(yīng)式的場(chǎng)景。
通過(guò)合理使用 shallowReactive 和 shallowRef，可以在保證功能的同時(shí)優(yōu)化 Vue 應(yīng)用的性能。
到此這篇關(guān)于vue3.x 的shallowReactive 與 shallowRef 詳細(xì)解讀的文章就介紹到這了,更多相關(guān)vue3.x 的shallowReactive 與 shallowRef 詳細(xì)解讀內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近在做一個(gè)類(lèi)似課程表的需求,需要自制一個(gè)日歷來(lái)支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開(kāi)發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實(shí)現(xiàn)一個(gè)日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue-i18n結(jié)合Element-ui的配置方法
這篇文章主要介紹了vue-i18n結(jié)合Element-ui的配置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue適配屏幕分辨率,以及屏幕的縮放方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門(mén)教程之列表渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue路由守衛(wèi)易錯(cuò)點(diǎn)實(shí)戰(zhàn)
文章主要討論了Vue?Router路由守衛(wèi)中的常見(jiàn)錯(cuò)誤,包括使用錯(cuò)誤的守衛(wèi)（beforeEnter與beforeRouteLeave混淆）、錯(cuò)誤的時(shí)機(jī)判斷、忽略守衛(wèi)層級(jí)順序、未處理異步邏輯和臟狀態(tài)等問(wèn)題,并并提供了常見(jiàn)問(wèn)題例及解決辦法,強(qiáng)調(diào)了要正確理解守衛(wèi)的作用和時(shí)機(jī)2026-05-05
Vue?export?default中的name屬性有哪些作用
這篇文章主要介紹了Vue?export?default中的name屬性有哪些作用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來(lái)共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們2023-08-08
Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11