自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

面試官:Vue3中什么是Reactive的懶響應(yīng)性?

開發(fā) 前端
所謂的 Reactive的懶響應(yīng)性 指的就是:Reactive 最初只會(huì)為復(fù)雜數(shù)據(jù)類型執(zhí)行第一層的響應(yīng)性。如果存在多層的復(fù)雜數(shù)據(jù)類型嵌套時(shí),則會(huì)在使用到(getter 行為)該子集時(shí),才會(huì)再次為該子集包裝 proxy(執(zhí)行 reactive 方法)。

Hello,大家好,我是 Sunday。

Reactive 的懶響應(yīng)性 可能很多同學(xué)之前沒有聽說過這個(gè)概念。最近一個(gè)同學(xué)在面試中就被問到了這個(gè)問題。所以說,咱們今天就借助這篇文章來看下:在vue3中,什么是 Reactive 的懶響應(yīng)性?

01:Reactive 的實(shí)現(xiàn)原理

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)性。

02:Proxy 的問題

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)性。

03: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 方法)

責(zé)任編輯:武曉燕 來源: 程序員Sunday
相關(guān)推薦

2022-06-29 16:59:21

Vue3Vue2面試

2022-12-06 08:39:27

Vue3Reactive

2021-09-07 10:44:33

Java 注解開發(fā)

2021-02-19 10:02:57

HTTPSJava安全

2024-12-03 10:40:51

Vue3injectprovide

2021-12-08 06:53:29

面試動(dòng)態(tài)代理

2024-02-22 15:36:23

Java內(nèi)存模型線程

2022-09-29 07:30:57

數(shù)據(jù)庫(kù)索引字段

2023-12-06 09:10:28

JWT微服務(wù)

2024-03-13 07:53:57

弱引用線程工具

2021-12-02 05:50:35

Vue3 插件Vue應(yīng)用

2021-04-22 07:49:51

Vue3Vue2.xVue3.x

2024-10-15 10:00:06

2021-05-12 08:20:53

開發(fā)

2021-07-06 07:27:45

React元素屬性

2024-11-06 12:59:42

多線程銷毀線程切換

2021-04-19 18:56:58

大數(shù)字符串運(yùn)算

2024-04-15 00:01:00

STWJava垃圾

2023-09-01 15:27:31

2023-12-20 14:35:37

Java虛擬線程
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)