全自動jQuery與渣男的故事

你們好，我是卡頌。

我是個戀舊的人，Github頭像仍是上古時期端遊仙劍奇俠傳的截圖。

對於前端，若是能jQuery一把梭，我是很開心的。

React、Vue的普及讓你們習慣了虛擬DOM的存在。可是虛擬DOM必定是最優解麼？

舉個例子，要進行以下DOM移動操做：

// 變化前
abcd
// 變化後
dabc
複製代碼

用jQuery時調用insertBefore把d挪到a前面就行。而React基於虛擬DOM的Diff會依次對abc執行appendChild，將他們依次挪到最後。

1次DOM操做 vs 3次DOM操做，顯然前者更高效。

那麼有沒有框架能砍掉虛擬DOM，直接對DOM節點執行操做，實現全自動jQuery？

有的，這就是最近出的petite-vue。

閱讀完本文，你會從原理層面瞭解該框架，若是你還有精力，能夠在此基礎上深刻框架源碼。

全自動jQuery的實現

能夠將原理歸納爲一句話：

創建狀態與更新DOM的方法之間的聯繫

好比，對於以下DOM：

<p v-show="showName">我是卡頌</p>
複製代碼

指望showName狀態的變化能影響p的顯隱（經過改變diaplay）。

實際是創建showName的變化與調用以下方法的聯繫：

() => {
  el.style.display = get() ? initialDisplay : 'none'
}
複製代碼

其中el表明p，get()獲取showName當前值。

再好比，對於以下DOM：

<p v-text="name"></p>
複製代碼

name改變後p的textContent會變爲對應值。

實際是創建name的變化與調用以下方法的聯繫：

() => {
  el.textContent = toDisplayString(get())
}
複製代碼

因此，整個框架的工做原理呼之欲出：初始化時遍歷全部DOM，根據各類v-xx屬性創建DOM與操做DOM的方法之間的聯繫。

當改變狀態後，會自動調用與其有關的操做DOM的方法，簡直就是全自動jQuery。

因此，框架的核心在於：如何創建聯繫？

一個渣男的故事

這部分源碼都收斂在@vue/reactivity庫中。我並不想帶你精讀源碼，由於這樣很沒意思，看了還容易忘。

接下來我會經過一個故事爲你展現其工做原理，當你瞭解原理後若是感興趣能夠本身去看源碼。

咱們的目標是描述：狀態變化與更新DOM的方法之間的聯繫。說得再寬泛點，是創建狀態與反作用之間的聯繫。

即：狀態變化 -> 執行反作用

對於一段關係，能夠從當事雙方的角度描述，好比：

男生指着女生說：這是我女友。

接着女生指着男生說：這是我男友。

你做爲旁觀者，經過雙方的描述就知道他們處於一段戀愛關係。

推廣到狀態與反作用，則是：

反作用指着狀態說：我依賴這個狀態，他變了我就會執行。

狀態指着反作用說：我訂閱了這個反作用，當我變了後我會通知他。

能夠看到，發佈訂閱實際上是對一段關係站在雙方視角的闡述

舉個例子，以下DOM結構：

<div v-scope="{num: 0}">
  <button @click="num++">add 1</button>
  <p v-show="num%2">
    <span v-text="num"></span>
  </p>
</div>  
複製代碼

通過petite-vue遍歷後的關係圖：

框架的交互流程爲：

1. 觸發點擊事件，狀態num變化

2. 通知其訂閱的反作用（effect1與effect2），執行對應DOM操做

若是從情侶關係角度解讀，就是：

num指着effect1說：這是我女友。

effect1指着num說：這是我男友。

num指着effect2說：這是我女友。

effect2指着num說：這是我男友。

總結

今天咱們學習了一個框架petite-vue，他的底層實現由多段混亂的男女關係組成，上層是一個個直接操做DOM的方法。

不知道看完後你有沒有興趣深刻了解下這種關係呢？

感興趣的話能夠看看Vue Mastery的Vue 3 Reactivity課程。