02 vue發布訂閱模式和js(關于jQuery和Vue兩者技術架構的比較分析報告)

回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。

在監聽數據的過程中，我們會為 data 中的每一個屬性生成一個主題對象 dep。

在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 容器中。

我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。

接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。

這里的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。

注意： 我把直接賦值的操作改為了 添加一個 Watcher 訂閱者

那么，Watcher又該做些什么呢？

首先，將自己賦給了一個全局變量 Dep.target；

其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；

再次，獲取屬性的值，然后更新視圖。

最后，將 Dep.target 設為空。因為它是全局變量，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。

最終我們就實現了這個雙向數據綁定功能，雖然很繁瑣，但我相信，你多打幾遍，一定會對你有所幫助，加油吧!!

聊一聊 Vue3 中響應式原理

Vue.js 3.0 "One Piece" 正式發布已經有一段時間了，真可謂是千呼萬喚始出來啊！

相比于 Vue2.x ， Vue3.0 在新的版本中提供了更好的性能、更小的捆綁包體積、更好的 TypeScript 集成、用于處理大規模用例的新 API 。

在發布之前，尤大大就已經聲明了響應式方面將采用 Proxy 對于之前的 Object.defineProperty 進行改寫。其主要目的就是彌補 Object.defineProperty 自身的一些缺陷，例如無法檢測到對象屬性的新增或者刪除，不能監聽數組的變化等。

而 Vue3 采用了新的 Proxy 實現數據讀取和設置攔截，不僅彌補了之前 Vue2 中 Object.defineProperty 的缺陷，同時也帶來了性能上的提升。

今天，我們就來盤一盤它，看看 Vue3 中響應式是如何實現的。

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. MDN

Proxy - 代理，顧名思義，就是在要訪問的對象之前增加一個中間層，這樣就不直接訪問對象，而是通過中間層做一個中轉，通過操作代理對象，來實現修改目標對象。

Vue3 中響應式核心方法就是 reactive 和 effect ， 其中 reactive 方法是負責將數據變成響應式， effect 方法的作用是根據數據變化去更新視圖或調用函數，與 react 中的 useEffect 有點類似~

其大概用法如下：

默認會執行一次，打印 Hello , 之后更改了 data.name 的值后，會在觸發執行一次，打印 World 。

我們先看看 reactive 方法的實現~

reactive.js

首先應該明確，我們應該導出一個 reactive 方法，該方法有一個參數 target ，目的就是將 target 變成響應式對象，因此返回值就是一個響應式對象。

reactive 方法基本結構就是如此，給定一個對象，返回一個響應式對象。

其中 isObject 方法用于判斷是否是對象，不是對象不需要代理，直接返回即可。

reactive 方法的重點是 Proxy 的第二個參數 handler ，它承載監控對象變化，依賴收集，視圖更新等各項重大責任，我們重點來研究這個對象。

handler.js

在 Vue3 中 Proxy 的 handler 主要設置了 get ， set ， deleteProperty ， has ， ownKeys 這些屬性，即攔截了對象的讀取，設置，刪除， in 以及 Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法。

這里我們偷個懶，暫時就考慮 set 和 get 操作。

handler.get()

get 獲取屬性比較簡單，我們先來看看這個，這里我們用一個方法創建 getHanlder 。

這里推薦使用了 Reflect.get 而并非 target[key] 。

可以發現， Vue3 是在取值的時候才去遞歸遍歷屬性的，而非 Vue2 中一開始就遞歸 data 給每個屬性添加 Watcher ，這也是 Vue3 性能提升之一。

handler.set()

同理 set 操作，我們也是用一個方法創建 setHandler 。

Reflect.set 會返回一個 Boolean 值，用于判斷屬性是否設置成功。

完事后將 handler 導出，然后在 reactive 中引入即可。

測試幾組對象貌似沒啥問題，其實是有一個坑，這個坑也跟數組有關。

如上例子，如果我們選擇代理數組，在 setHandler 中打印其 key 和 value 的話會得到 3 4 ， length 4 這兩組值：

如果不作處理，那么會導致如果更新視圖的話，則會觸發兩次，這肯定是不允許的，因此，我們需要將區分新增和修改這兩種操作。

Vue3 中是通過判斷 target 是否存在該屬性來區分是新增還是修改操作，需要借助一個工具方法 —— hasOwnProperty 。

這里我們將上述的 createSetter 方法修改如下：

如此一來，我們調 push 方法的時候，就只會觸發一次更新了，非常巧妙的避免了無意義的更新操作。

effect.js

光上述構造響應式對象并不能完成響應式的操作，我們還需要一個非常重要的方法 effect ，它會在初始化執行的時候存儲跟其有關的數據依賴，當依賴數據發生變化的時候，則會再次觸發 effect 傳遞的函數。

其基本雛形如下，入參是一個函數，還有個可選參數 options 方便后面計算屬性等使用，暫時不考慮：

createReactiveEffect 就是為了將 fn 變成響應式函數，監控數據變化，執行 fn 函數，因此該函數是一個高階函數。

createReactiveEffect 將原來的 fn 轉變成一個 reactvieEffect ， 并將當前的 effect 掛到全局的 activeEffect 上，目的是為了一會與當前所依賴的屬性做好對應關系。

我們必須要將依賴屬性構造成 { prop : [effect,effect] } 這種結構，才能保證依賴屬性變化的時候，依次去觸發與之相關的 effect ，因此，需要在 get 屬性的時候，做屬性的依賴收集，將屬性與 effect 關聯起來。

依賴收集 —— track

在獲取對象的屬性時，會觸發 getHandler ，再次做屬性的依賴收集，即 Vue2 中的發布訂閱。

在 setHandler 中獲取屬性的時候，做一次 track(target, key) 操作。

整個 track 的數據結構大概是這樣

目的就是將 target ， key ， effect 之間做好對應的關系映射。

打印 targetMap 的結構如下：

**觸發更新 —— trigger

**

上述已經完成了依賴收集，剩下就是監控數據變化，觸發更新操作，即在 setHandler 中添加 trigger 觸發操作。

這樣一來，獲取數據的時候通過 track 進行依賴收集，更新數據的時候再通過 trigger 進行更新，就完成了整個數據的響應式操作。

再回頭看看我們先前提到的例子：

控制臺會依次打印 Hello ***** effect ***** 以及 World ***** effect ***** ， 分別是首次渲染觸發跟更新數據重渲染觸發，至此功能實現！

整體來說， Vue3 相比于 Vue2 在很多方面都做了調整，數據的響應式只是冰山一角，但是可以看出尤大團隊非常巧妙的利用了 Proxy 的特點以及 es6 的數據結構和方法。另外， Composition API 的模式跟 React 在某些程度上有異曲同工之妙，這種設計模式讓我們在實際開發使用中更加的方法快捷，值得我們去學習，加油！

最后附上倉庫地址 github ，歡迎各位大佬批評斧正~

關于jQuery和Vue兩者技術架構的比較分析報告

在過去的前端開發中，jQuery幾乎會出現在任何大大小小的項目中，不論是類MS，還是電商，還是各類門戶網站，都少不了jQuery的身影，可以說在之前的前

很赞哦!（8355）