Reactive 的懶響應性 可能很多同學之前沒有聽說過這個概念。最近一個同學在面試中就被問到了這個問題。所以說，咱們今天就借助這篇文章來看下：在vue3中，什么是 Reactive 的懶響應性？

1.Reactive 的實現(xiàn)原理

Reactive 是基于 Proxy 進行實現(xiàn)的，這個概念很多同學都是知道的。我們可以通過 vue 的源碼來看下這個實現(xiàn)：

代碼比較復雜，大家可以只看我紅框中的內容。

通過上圖紅框中的代碼，我們可以很清晰的看到在 Reactive 里面，Vue 最終通過 new Proxy 的方式生成了一個 Proxy 的實例對象。 這個 Proxy 的實例就是 reactive() 方法調用時的返回值。

我們可以通過如下偽代碼表示：

function reactive (target) {
  return new Proxy(target, {....})
}

const test = reactive({name: '張三'})

在這種情況下，{name: '張三'} 就會被包裝成一個 響應式對象，proxy 通過監(jiān)聽它的 getter、setter 行為來觸發(fā)響應性。

2.Proxy 的問題

Proxy 可以代理對象，這個是沒有問題的。但是：Proxy 只能代理一層對象，而不能代理多層。

什么意思呢？假如當 代理對象 具備層級嵌套的時候，proxy 是不可以代理子層級的。我們可以通過以下代碼來進行測試：

const target = {
    name: '張三',
    child: {
      name: '小張三'
    }
  }

const p = newProxy(target, {
    set(target, property, value, receiver) {
      console.log('觸發(fā)了 set');
      target[property] = value
      returntrue
    },
    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 對象。注意：此時的 target 是存在嵌套的復雜數(shù)據類型 child。

當我們執(zhí)行 p.name = '李四' 時，觸發(fā) set 行為，這是一個很正常的邏輯。但是，當我們執(zhí)行 p.child.name = '小李四' 時，我們會發(fā)現(xiàn) 僅觸發(fā)了一個 get（p.child），而沒有觸發(fā) set 行為。

這就證明：對于 Proxy 而言， 它只能代理 一層 的復雜數(shù)據類型，而不可以代理多層。

但是，在 Vue 中 多層的 Reactive 對象卻可以實現(xiàn)響應性，那么這是如何做到的呢？ 具體的方式就是 Reactive的懶響應性。

3.Reactive的懶響應性

我們觀察 Vue 的源碼，在源碼監(jiān)聽 proxy getter 行為的地方，存在這樣一段代碼（我把代碼稍微做了一些調整，讓大家看的可以更加清晰）：

圖片

核心的代碼就在紅框的位置，其中的 res 大家可以理解為 target[property] 。

而根據 01：Reactive 的實現(xiàn)原理 我們知道 reactive 方法本質上就是生成了一個 Proxy 實例。所以說，這里的代碼核心其實就是 一旦獲取到的屬性是對象，則會為該對象再次執(zhí)行 reactive 方法。

如果用偽代碼表示，就是下面這樣：

圖片

即：再次通過 Proxy 完成代理，并返回。

所以說，所謂的 Reactive的懶響應性 指的就是：Reactive 最初只會為復雜數(shù)據類型執(zhí)行第一層的響應性。如果存在多層的復雜數(shù)據類型嵌套時，則會在使用到（getter 行為）該子集時，才會再次為該子集包裝 proxy（執(zhí)行 reactive 方法）。