vue3常用響應(yīng)式對(duì)象的api,你全用過(guò)了嗎
Ⅰ. ref、reactive ( 遞歸監(jiān)聽(tīng) )
import {ref,reactive} from 'vue'; setup() { const num = ref(123); num.value = 456; const obj = reactive({num:123}); obj.value = 456; }
- ref 對(duì)象 在 html 模板中會(huì) 自動(dòng)添加 value ( ref 對(duì)象中__v_isRef:true 進(jìn)行判斷的 )
- ref 對(duì)象 => reactive( { value:0 } ) 底層自動(dòng)轉(zhuǎn)換為 reactive
- 最終 基本數(shù)據(jù) 類(lèi)型采用 => (Object.defineProperty) ,引用數(shù)據(jù) 類(lèi)型采用 => ( proxy 代理 )
Ⅱ. isRef、isReactive ( 判斷 )
import {isRef,isReactive} from 'vue'; setup() { const num = ref(123) console.log(isRef(num)) // => true }
- 用于判斷是否是 Ref 和 Reactive 創(chuàng)建的響應(yīng)對(duì)象
- 使用場(chǎng)景較少
Ⅲ. toRef 和 toRefs ( 解構(gòu) )
toRef (一個(gè)屬性)
import { toRef , reactive } from 'vue'; setup() { const obj = reactive({ width:10, height:20 }) const width = toRef(obj,'width') return { width } }
- 將一個(gè)響應(yīng)對(duì)象的屬性,當(dāng)作 響應(yīng)對(duì)象 單獨(dú)拿出來(lái) 。
toRefs ( 所有 )
import { toRefs , reactive } from 'vue'; setup() { const obj = reactive({ width:10, height:20 }) const { width, height }= toRefs(obj) return { width, height } }
- 將多個(gè)或所有屬性,拿出來(lái) 且還是響應(yīng)對(duì)象,
- 一般在返回的時(shí)候一次性全部導(dǎo)出 ??
import { toRefs , reactive } from 'vue'; setup() { const obj = reactive({ width:10, height:20 }) return { ...toRefs(obj) } }
Ⅳ. toRaw 、 markRaw ( 解除代理)
toRaw ( 不影響本身 )
import {toRaw} from 'vue'; setup(){ const num1 = ref(123) const num2 = toRaw(num1) console.log(num2 === 123) //=>true }
- 不影響原數(shù)據(jù) ,相當(dāng)于拷貝當(dāng)前的值
- 拷貝的值,不在是響應(yīng)式對(duì)象
markRaw ( 添加 非響應(yīng)對(duì)象 屬性 )
import { markRaw, reactive } from "vue"; setup(){ const obj = reactive({ num:1 }); //讓數(shù)據(jù)無(wú)法被追蹤 obj.noUpdate = markRaw({num:1}); function add() { obj.num++; // 頁(yè)面數(shù)據(jù) 會(huì)更新 obj.noUpdate.num++; //頁(yè)面數(shù)據(jù) 不會(huì)更新 } return { obj , add } }
- 通過(guò) markRaw 添加的值 => 其中的屬性變化,頁(yè)面不會(huì)監(jiān)聽(tīng)的到
- 用于添加搞定的參數(shù),不會(huì)發(fā)生不會(huì)的 ( 從而節(jié)約資源 )
Ⅴ. unref ( 拷貝 )
const aaa = ref('abc'); const bbb = unref(aaa);
- 相當(dāng)于 bbb = isRef(aaa) ? aaa.value : aaa 的語(yǔ)法糖
- 可以用于拷貝
Ⅵ. shallowRef 、shallowReactive( 非遞歸監(jiān)聽(tīng) )
shallowRef 、shallowReactive(非遞歸監(jiān)聽(tīng))
import {shallowRef,shallowReactive} from 'vue'; setup(){ const obj1 = shallowRef({a:1,b:{c:2}) const obj2 = shallowReactive({a:1,b:{c:2}) obj1.value.a = 2 //頁(yè)面未更新 obj2.b.c = 3 //頁(yè)面未更新 }
- obj1 (shallowRef)=> 只監(jiān)聽(tīng)第一層( value 的值,不監(jiān)聽(tīng)a、b、c、d 的值)
- obj2 (shallowReactive)=> 只監(jiān)聽(tīng)第一層( a、b 的值,不監(jiān)聽(tīng) c 的值)
Ⅶ. triggerRef (強(qiáng)制更新)
import {triggerRef, shallowRef} from 'vue'; setup(){ const obj1 = shallowRef({a:1,b:{c:2}) obj1.value.a = 2 //頁(yè)面沒(méi)有發(fā)生更新,因?yàn)橹槐O(jiān)聽(tīng)value第一層 triggerRef(obj1); // 強(qiáng)制更新
- 非遞歸監(jiān)聽(tīng),只監(jiān)聽(tīng)首層 ,消耗的資源小;
- 配合 triggerRef 強(qiáng)制更新 => 性能要大于 > 直接使用 (ref 和 reactive)
總結(jié)
到此這篇關(guān)于vue3常用響應(yīng)式對(duì)象的api的文章就介紹到這了,更多相關(guān)vue3響應(yīng)式對(duì)象api內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue表單驗(yàn)證你真的會(huì)了嗎?vue表單驗(yàn)證(form)validate
這篇文章主要介紹了vue表單驗(yàn)證你真的會(huì)了嗎?vue表單驗(yàn)證(form)validate,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01vue實(shí)現(xiàn)背景圖片鋪滿整個(gè)屏幕(適配所有機(jī)型)
在網(wǎng)頁(yè)設(shè)計(jì)中,背景全屏是一種常見(jiàn)的視覺(jué)效果,通過(guò)正確的CSS樣式設(shè)置,可以實(shí)現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過(guò)滾動(dòng)條查看剩余內(nèi)容,這種設(shè)計(jì)可以提升用戶(hù)的瀏覽體驗(yàn),使網(wǎng)頁(yè)看起來(lái)更加整潔和專(zhuān)業(yè)2024-10-10vue在自定義組件上使用v-model和.sync的方法實(shí)例
自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下2022-07-07vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)
這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼
這篇文章主要介紹了vue3中el-table實(shí)現(xiàn)表格合計(jì)行,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01