紅魔電競(jìng)平板評(píng)測(cè)：大屏幕硬實(shí)力
前言：三年的疫情因?yàn)橐暇W(wǎng)課的原因激活了平板市場(chǎng)，如今網(wǎng)課的時(shí)代已經(jīng)過去，大家的生活都恢復(fù)到了正軌，這也就意味著，真正考驗(yàn)平板電腦生存的環(huán)境來了。也就是面對(duì)著這種殘酷的
Hello，大家好，我是 Sunday。
Reactive 的懶響應(yīng)性 可能很多同學(xué)之前沒有聽說過這個(gè)概念。最近一個(gè)同學(xué)在面試中就被問到了這個(gè)問題。所以說，咱們今天就借助這篇文章來看下：在vue3中，什么是 Reactive 的懶響應(yīng)性？
Reactive 是基于 Proxy 進(jìn)行實(shí)現(xiàn)的，這個(gè)概念很多同學(xué)都是知道的。我們可以通過 vue 的源碼來看下這個(gè)實(shí)現(xiàn)：
圖片
代碼比較復(fù)雜，大家可以只看我紅框中的內(nèi)容
通過上圖紅框中的代碼，我們可以很清晰的看到在 Reactive 里面，Vue 最終通過 new Proxy 的方式生成了一個(gè) Proxy 的實(shí)例對(duì)象。 這個(gè) Proxy 的實(shí)例就是 reactive() 方法調(diào)用時(shí)的返回值。
我們可以通過如下偽代碼表示：
function reactive (target) { return new Proxy(target, {....})}const test = reactive({name: '張三'})在這種情況下，{name: '張三'} 就會(huì)被包裝成一個(gè) 響應(yīng)式對(duì)象，proxy 通過監(jiān)聽它的 getter、setter 行為來觸發(fā)響應(yīng)性。
Proxy 可以代理對(duì)象，這個(gè)是沒有問題的。但是：Proxy 只能代理一層對(duì)象，而不能代理多層。
什么意思呢？假如當(dāng) 代理對(duì)象 具備層級(jí)嵌套的時(shí)候，proxy 是不可以代理子層級(jí)的。我們可以通過以下代碼來進(jìn)行測(cè)試：
const target = { name: '張三', child: { name: '小張三' } } const p = new Proxy(target, { set(target, property, value, receiver) { console.log('觸發(fā)了 set'); target[property] = value return true }, get(target, property, receiver) { console.log('觸發(fā)了 get'); return target[property] } }) p.name = '李四' // 打?。河|發(fā)了 set p.child.name = '小李四' // 打?。河|發(fā)了 get。注意：并沒有觸發(fā) child 的 set在上述代碼中，我們利用 proxy 代理了 target 對(duì)象。注意：此時(shí)的 target 是存在嵌套的復(fù)雜數(shù)據(jù)類型 child。
當(dāng)我們執(zhí)行 p.name = '李四' 時(shí)，觸發(fā) set 行為，這是一個(gè)很正常的邏輯。但是，當(dāng)我們執(zhí)行 p.child.name = '小李四' 時(shí)，我們會(huì)發(fā)現(xiàn) 僅觸發(fā)了一個(gè) get（p.child），而沒有觸發(fā) set 行為。
這就證明：對(duì)于 Proxy 而言， 它只能代理 一層 的復(fù)雜數(shù)據(jù)類型，而不可以代理多層。
但是，在 Vue 中 多層的 Reactive 對(duì)象卻可以實(shí)現(xiàn)響應(yīng)性，那么這是如何做到的呢？ 具體的方式就是 Reactive的懶響應(yīng)性。
我們觀察 Vue 的源碼，在源碼監(jiān)聽 proxy getter 行為的地方，存在這樣一段代碼（我把代碼稍微做了一些調(diào)整，讓大家看的可以更加清晰）：
圖片
核心的代碼就在紅框的位置，其中的 res 大家可以理解為 target[property] 。
而根據(jù) 01：Reactive 的實(shí)現(xiàn)原理 我們知道 reactive 方法本質(zhì)上就是生成了一個(gè) Proxy 實(shí)例。所以說，這里的代碼核心其實(shí)就是 一旦獲取到的屬性是對(duì)象，則會(huì)為該對(duì)象再次執(zhí)行 reactive 方法
如果用偽代碼表示，就是下面這樣：
圖片
即：再次通過 Proxy 完成代理，并返回
所以說，所謂的 Reactive的懶響應(yīng)性 指的就是：Reactive 最初只會(huì)為復(fù)雜數(shù)據(jù)類型執(zhí)行第一層的響應(yīng)性。如果存在多層的復(fù)雜數(shù)據(jù)類型嵌套時(shí)，則會(huì)在使用到（getter 行為）該子集時(shí)，才會(huì)再次為該子集包裝 proxy（執(zhí)行 reactive 方法）
本文鏈接：http://www.www897cc.com/showinfo-26-82949-0.html面試官：Vue3中什么是Reactive的懶響應(yīng)性？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)