回顧下前幾章的內容，在前幾章中主要講述了以下內容。

新構建工具?vite?的原理和從零開始實現

vue3?使用新姿勢

新api：reactive?使用和源碼解析

追蹤收集?track?實現和源碼解析

追蹤觸發器?trigger?實現和源碼解析

響應式核心?effect?與?track、trigger?工作原理和源碼解析

好的，這章的目標：從零開始完成一個 Vue3 ！

必須要知道的前置知識?effect?與?track、trigger?工作原理，具體詳情請看公眾號 ->?前端進階課，一個有溫度且沒有廣告的前端技術公眾號。

在這里還是簡單解析下這3個函數的作用吧

track: 收集依賴，存入?targetMap

trigger：觸發依賴，使用?targetMap

effect：副作用處理

本章源碼請看?uuz?急需 star 維持生計。

手摸手實現 Vue3

首先。我們2個全局變量，用來存放和定位追蹤的依賴，也就是給?track?和?trigger?使用的倉庫。

let targetMap = new WeakMap(); let activeEffect;

所以第一個需要設計的方法就是?track，還記得該track在vue3是如何調用的嗎？

track(obj, 'get', 'x');

track?會去找?obj.x?是否被追蹤，如果沒找到就將obj.x放入targetMap（完成追蹤任務），將?obj.x?作為 map 的 key 將 activeEffect 作為 map 的 value。

拋開取值異常處理之類的，track?只做了一件事，將activeEffect塞入targetMap;

?然后就是寫一個?trigger，還記得trigger在vue是如何調用的嗎？

trigger(obj, 'set', 'x')

trigger?只會去?targetMap?中尋找obj.x的追蹤任務，如果找到了就去重，然后執行任務。

也就是說：拋開取值異常相關，trigger?也只做了一件事：從?targetMap?取值然后調用該函數值。

?最后就是?effect，還記得該打工仔的api在vue3中是如何調用的嗎？

?

effect?接收一個回調函數，然后會被送給?track。所以我們可以這么完成?effect

定義一個內部函數?_effect，并執行。

返回一個閉包

而內部?_effect?也做了兩件事

將自身賦值給?activeEffect

執行?effect?回調函數

優秀的代碼呼之欲出。

所有的前置項都完成了，現在開始完成一個?reactive，也就是對象式響應式的api。還記得vue3中如何使用?reactive?嗎？

?

通過上面的的優秀代碼，很輕易的實現了vue3的響應式操作。通過回顧前幾章的內容，我們知道?reactive?是通過 Proxy 代理數據實現的。

這樣我們就可以通過?Proxy?來調用?track?和?trigger，劫持?getter?和?setter?完成響應式設計

好了。一切就緒，那么我們掛載下我們的?fake vue3?吧?

?

用 self-vue3 寫一個 demo

測試一下。參照 vue3 的寫法。定義個?setup?和?render。?

?

?

執行一下，果然是優秀的代碼。響應式正常執行，每次?setInterval?執行后，頁面都重寫刷新了?count.num?的數據。

源碼請看?uuz，ps：7月23日該源碼已經支持 jsx 了。

以上通過?50+行代碼，輕輕松松的實現了?vue3的響應式。但這就結束了嗎？

還有以下問題

Proxy?一定需要傳入對象

render?函數 和?h?函數并正確（Vue3的h函數現在是2個不是以前的createElement了）

虛擬 dom 的遞歸

別再說了- -!，我不聽。

ref

使用 reactive 會有一個缺點，那就是，Proxy 只能代理對象，但不能代理基礎類型。

如果你調用這段代碼?new Proxy(0, {})，瀏覽器會反饋你?Uncaught TypeError: Cannot create proxy with a non-object as target or handler

所以，對于基礎類型的代理。我們需要一個新的方式，而在?vue3?中，對于基礎類型的新 api 是?ref

?

總結：

reactive 的核心是?track?+?trigger?+?Proxy

ref 是通過對象自有的?getter?和?setter?配合?track?+?trigger?實現的

computed 其實是一個在?effect?基礎上的改進

下章內容：vue3?該怎么結合?jsx？

總結

以上是生活随笔為你收集整理的vue3:我来吹牛皮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。