vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解
正文
在第四章中,作者講述了Vue.js中響應(yīng)式系統(tǒng)的設(shè)計與實(shí)現(xiàn),這一塊其實(shí)是整個框架的基石,也是MVVM中,ViewModel(VM)的重要組成部分。 其實(shí)在上一章中我已經(jīng)感覺很難了,有一些操作作者也只是幾筆帶過,卻很值得我們思考。這一張中,我們將目光著重于響應(yīng)式數(shù)據(jù)本身,來完善上一章中我們的demo。
理解Proxy與Reflect
vue3的響應(yīng)式離不開Proxy
,說到Proxy
則離不開Reflect
.這兩個對象是ES6新增的對象,同時在編程領(lǐng)域,他們也代表著2種設(shè)計模式,即代理與反射。設(shè)計模式都是后話,等我學(xué)會了也一定寫一篇文章分享一下??.
Proxy
Proxy
可以理解成,在目標(biāo)對象之前架設(shè)一層“攔截”,外界對該對象的訪問,都必須經(jīng)過這層攔截,而我們就可以通過這層攔截去改變目標(biāo)對象的內(nèi)容或者行為,或者叫過濾和控制。這個詞本意就是代理,好比一個代理人站在神奇,我們所有行為都會被他過濾,可能我們說的話,經(jīng)過代理人一說,意思就變了。
ES6 原生提供 Proxy 構(gòu)造函數(shù),用來生成 Proxy 實(shí)例。
var proxy = new Proxy(target, handler);
其中target
表示要代理的那個對象,handler
則是表示我們需要攔截的行為,這里直接放一張阮一峰的截圖。
Reflect
Reflect
中文譯為:反射。如果說Proxy
是有一個代理人站在身前面,幫你攔截并處理一些行為,那么Reflect
就是你身后的一面鏡子,它能看見真實(shí)的自己。
而你自己,就是一個類或者對象,或者一個函數(shù),只要是js中存在的,都能被Proxy
和 Reflect
處理。
它的操作和Proxy
正好相反,但卻一一對應(yīng)。比如我們獲取對象中一個屬性。
const obj = {foo:1} const a = Reflect.get(obj, 'foo')
這一小節(jié)主要是介紹了Proxy與Reflect,后面會有一個應(yīng)用老告訴你為什么Proxy與Reflect與響應(yīng)式數(shù)據(jù)息息相關(guān)。
實(shí)踐示例
看完了Proxy
與Reflect
的基本使用之后,我們實(shí)踐一下。
我們曾經(jīng)寫過這樣的代碼
const reactive = (object)=>{ return new Proxy(object,{ get(target,key){ track(target,key) return target[key] } set(target,key, newVal){ target[key] = newVal trigger(target,key) return true } }) }
其實(shí)就是用Proxy
代理了對象讀和取操作,在讀的時候收集依賴,在取的時候觸發(fā)響應(yīng)??雌饋硭坪鯖]有問題,那么我們再試?yán)^續(xù)往下寫
const obj = { a:1, get b(){ return this.a } } const data = reactive(obj) effect(()=>{ console.log(data.b) }) setTimeOut(()=>{ data.b++ },500)
這里我們沒有用一般的對象寫法,而是通過訪問器為它新增了一個b屬性.之后,我們先把這個對象轉(zhuǎn)換為響應(yīng)式對象,再給他們設(shè)定一個響應(yīng)式的回調(diào),然后在冬天改變他的值,理論上這時候應(yīng)該會執(zhí)行副作用函數(shù),但是實(shí)際上呢,根本不會執(zhí)行。
我們回顧一下之前寫的reactive
方法,在里面返回的是target[key]
,當(dāng)我們的target是obj,key是b的時候,那個this會是誰呢?因為target是原始對象,也就是obj,根據(jù)誰調(diào)用是誰的原則,這個this也就指向了obj。obj是響應(yīng)式對象嗎,顯然不是,那個b也就永遠(yuǎn)不會執(zhí)行副作用函數(shù),響應(yīng)式就失效了。
這里其實(shí)就是this的指向問題,你可能會說一般人怎么會用getter去賦值屬性呢,但是這個作為一個簡單的case,甚至都算不上邊界,我們需要解決它。
解決的方法也很簡單,就是通過Reflect
。這也是為什么我說Proxy
與Reflect
就是焦不離孟 孟不離焦. 我們的reactive,get的時候,加入第三個參數(shù)receiver
get(target,key){ track(target,key,receiver) return Reflect.get(target,key,receiver) }
我這里理解的是,receiver
就相當(dāng)于函數(shù)的bind
方法,它改變的this的執(zhí)行,當(dāng)我們同過Reflect
讀取值的時候,this的指向被改為receiver
,而Reflect
時的receiver
又是Proxy
中的入?yún)ⅲ鼒?zhí)行了這個Proxy
,從而把前文中this的指向由obj改為data,這樣響應(yīng)式就不會丟失了。
下一章中,作者會深入的介紹一下Proxy
和一些相關(guān)的標(biāo)準(zhǔn)。
以上就是vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解的詳細(xì)內(nèi)容,更多關(guān)于vue3響應(yīng)式Proxy Reflect的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實(shí)例
今天小編就為大家分享一篇Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法
這篇文章主要介紹了vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-02-02vue本地模擬服務(wù)器請求mock數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了關(guān)于vue本地模擬服務(wù)器請求mock數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03