前言

Vue3.5版本又將響應式給重構(gòu)了，重構(gòu)后的響應式系統(tǒng)主要有兩部分組成：雙向鏈表和 版本計數(shù)。我們在前兩篇文章中我們已經(jīng)講過了 雙向鏈表和 版本計數(shù)，這篇文章我們來講講為什么這次重構(gòu)能夠讓內(nèi)存占用減少56%。

為什么說“又”將響應式重構(gòu)了

因為在之前的Vue3.4版本中剛剛將響應式給重構(gòu)了，這次響應式重構(gòu)是vscode插件Vue-Official（原名Volar）的作者Johnson Chu搞的。

3.4版本的重構(gòu)優(yōu)化了很多東西，最直觀的就是：computed計算屬性的值沒有變化，另外一個watch又監(jiān)聽了這個computed的值。在3.4以前還是會觸發(fā)watch的回調(diào)，經(jīng)過3.4的優(yōu)化后就不會觸發(fā)了。

在3.5版本以前，Vue的響應式系統(tǒng)中有兩個角色：Sub訂閱者和Dep依賴。

Sub訂閱者：主要有watchEffect、watch、render函數(shù)、computed等。

Dep依賴：主要有ref、reactive、computed等響應式變量。

他們兩之間是相互依賴的關(guān)系，如下圖：

圖片

Dep依賴（比如ref響應式變量）可以通過dep屬性訪問到Sub訂閱者（比如computed計算屬性），就知道了到底有哪些訂閱者依賴自己，當自己的值改變后就能去通知訂閱者。

同樣Sub訂閱者（比如computed計算屬性）可以通過deps屬性訪問到Dep依賴（比如ref響應式變量），當Sub訂閱者不再依賴某個變量時就可以通過這個關(guān)系去訪問到這個Dep依賴。然后把自己從不再依賴的變量的Sub訂閱者集合中去掉，這樣當這個響應式變量改變后就不會通知到不再訂閱到他的Sub訂閱者了。

我們來看個例子，代碼如下：

<template>
  <p>{{ doubleCount }}</p>
  <button @click="flag = !flag">切換flag</button>
</template>

<script setup>
import { computed, ref } from "vue";
const count1 = ref(1);
const count2 = ref(10);
const flag = ref(true);

const doubleCount = computed(() => {
  console.log("computed");
  if (flag.value) {
    return count1.value * 2;
  } else {
    return count2.value * 2;
  }
});
</script>

當flag的值為true時計算屬性doubleCount其實只依賴響應式變量flag和count1，當flag的值切換為false時，計算屬性應該變成依賴變量flag和count2。

就上面這個更新Sub訂閱者依賴的邏輯，Vue其實重構(gòu)了很多次。在早期的Vue3版本中是直接清空Sub訂閱者所依賴的響應式變量，然后再重新執(zhí)行計算屬性doubleCount時再去將新的響應式變量進行收集。很明顯這個版本內(nèi)存的使用就非常浪費了。

在最新的Vue3.4版本重構(gòu)后的響應式系統(tǒng)中會在執(zhí)行計算屬性之前利用_trackId和_depsLength字段進行標記，在重新執(zhí)行計算屬性時進行依賴收集就可以利用_trackId和_depsLength字段判斷出Dep依賴是否能夠復用，并且執(zhí)行完計算屬性的回調(diào)函數(shù)后同樣利用_trackId和_depsLength字段就可以將不再依賴的Dep依賴給移除掉。

上面這個方案看著很完美，但是他的核心是依賴計算屬性中所依賴的變量順序不變，如果順序變了，那么依然還是不能夠復用的，同樣會對浪費內(nèi)存。（PS：這一段3.4版本響應式看不懂沒關(guān)系，因為他已經(jīng)是過去式了）

內(nèi)存優(yōu)化主要原因：復用Link節(jié)點

在Vue3.5版本中那個最了解Vue的男人出手了，使用雙向鏈表和版本計數(shù)將響應式系統(tǒng)再次給重構(gòu)了。說實話這次重構(gòu)后讓讀響應式源碼的門檻變得更高了，但是收益特別明顯，最主要是通過復用Link節(jié)點去實現(xiàn)減少內(nèi)存的使用。

還是上面的那個例子，對應新的響應式模型如下圖：

圖片

在新的響應式模型中Sub訂閱者和Dep依賴之間不再有直接的關(guān)聯(lián)關(guān)系了，而是通過中間的Link節(jié)點作為橋梁去關(guān)聯(lián)。

在前一節(jié)中我們講過了，3.5以前Sub訂閱者中有屬性會去存依賴的Dep依賴，Dep依賴中有屬性去存依賴他的Sub訂閱者，所以導致當Sub訂閱者依賴的變量需要更新時就無法做到完全的復用，內(nèi)存就會浪費。

如果下面的內(nèi)容你看不懂，這不是你理解力有問題，原因是你對雙向鏈表不熟悉，可以先看看我之前的 雙向鏈表文章。

在3.5新的響應式模型中，X軸是Dep依賴，Y軸是Sub訂閱者，Link節(jié)點是作為坐標軸上面的點。每一組Dep依賴和Sub訂閱者都會對應一個Link節(jié)點，并且可以通過這個Link節(jié)點直接訪問到Dep依賴和Sub訂閱者。

在Y軸上面找一個點（比如Sub1也就是計算屬性doubleCount），橫向出發(fā)就可以找到Sub1訂閱者所依賴的所有響應式變量。因為橫向的這些Link節(jié)點是一個雙向鏈表，并且可以通過某一個Link節(jié)點直接訪問到他的Dep依賴。

當flag的值切換為false后，訂閱者Sub1所依賴的響應式變量就從flag+count1變成flag+count2。這時我們需要做的事情就很簡單了，新建一個Link3節(jié)點，可以直接訪問到Sub1和Dep3。然后將Link1中原本指向Link2的指針改為指向Link3，同時讓Link3的指針也指向Link1。并且將Link2指向Link1的指針改為指向空，由于Dep2現(xiàn)在不被任何訂閱者所依賴了，所以將Link2原本指向Dep2的指針也改為指向空，同樣將Dep2指向Link2的指針也指向空。

上面的一頓操作，除了必要的初始化一個Link3之外我們一直都是在進行指針的操作，并不像以前的響應式一樣去增加Sub訂閱者依賴或者減少依賴，這是非常高效的方式。

當flag的值切換為false后，新的響應式模型圖如下：

圖片

從上圖中可以看到Link2已經(jīng)徹底從雙向鏈表中移除了，并且整個過程中我們都是在操作指針的指向，所以Link1也一直都是復用的。

V8在進行垃圾回收的時候發(fā)現(xiàn)Link2不再被任何變量所使用，就可以認為Link2是一個可以被回收的變量，就會將其直接回收釋放內(nèi)存。

Link節(jié)點復用以及讓不再使用的Link節(jié)點盡快的被回收進而釋放內(nèi)存，就是這次響應式重構(gòu)減少56%內(nèi)存占用的主要原因。

其他優(yōu)化

有了雙向鏈表后依賴觸發(fā)也變得更加清晰了，當某個響應式變量改變后，只需要遍歷Dep依賴（縱向）的Link節(jié)點組成的雙向鏈表，然后通過這些Link節(jié)點直接訪問到對應的Sub訂閱者，觸發(fā)其依賴。

基于此Sub訂閱者的觸發(fā)就是一個線性的過程，所以就可以實現(xiàn)將需要觸發(fā)的Sub訂閱者串起來組成了一個Sub訂閱者組成的隊列。等需要觸發(fā)的訂閱者收集完了后，再去進行觸發(fā)Sub訂閱者，避免同一個訂閱者被觸發(fā)多次。

依賴觸發(fā)相比之前也變得更加簡單了，性能以及內(nèi)存也有所提升。

最后就是因為有了雙向鏈表和版本計數(shù)的加持后，computed計算屬性變得更加聰明，現(xiàn)在是惰性計算了。computed計算屬性只有等有人使用他（比如在template中使用計算屬性doubleCount）后才會去執(zhí)行計算屬性中的回調(diào)函數(shù)，以及3.4版本中就已經(jīng)實現(xiàn)的如果計算屬性值沒有變化，另外一個watch又監(jiān)聽了這個computed的值，此時這個watch不會被觸發(fā)。關(guān)于這個可以看我之前的版本計數(shù)文章。

總結(jié)

Vue3.5響應式重構(gòu)主要是通過雙向鏈表和版本計數(shù)實現(xiàn)的，優(yōu)化后內(nèi)存占用減少了56%。主要原因是：在新的響應式系統(tǒng)中多了一個Link節(jié)點用于鏈接Sub訂閱者和Dep依賴，更新Sub訂閱者依賴只是進行指針的變換，并且還能夠復用Link節(jié)點以及將不再使用的Link節(jié)點給孤立出來便于V8更快的將這個Link節(jié)點給回收。此外還有Sub訂閱者的觸發(fā)也變得更加簡單，以及現(xiàn)在是computed計算屬性是惰性計算了，這些優(yōu)化同樣也優(yōu)化了內(nèi)存的使用。