深入Vue3響應(yīng)式：手寫實現(xiàn)reactive與ref
前言
上篇文章介紹了Vue3響應(yīng)式的兩個核心API，知道了兩者的用法于區(qū)別，本文將帶您深入實現(xiàn)其核心機制。我們將重點實現(xiàn)響應(yīng)式數(shù)據(jù)變化時的依賴收集與觸發(fā)更新功能，暫不涉及虛擬DOM和diff算法部分，視圖更新將直接使用DOM API實現(xiàn)。通過這個實現(xiàn)，將更透徹地理解：
- 如何建立數(shù)據(jù)與視圖的響應(yīng)式關(guān)聯(lián)
- 依賴收集的核心原理
- 觸發(fā)更新的執(zhí)行機制
響應(yīng)式實現(xiàn)方案
關(guān)于響應(yīng)式方案，Vue目前一共出現(xiàn)過三種方案，分別是：
方案 | 版本 | 核心缺陷 |
defineProperty | Vue2 | 無法攔截數(shù)組操作、對象屬性增刪 |
Proxy + Reflect | Vue3 | 完美解決Vue2的響應(yīng)式限制 |
getter/setter | ref實現(xiàn) | 支持基本數(shù)據(jù)類型的響應(yīng)式 |
defineProperty是Vue2中使用的響應(yīng)式方案，由于該API有挺多缺陷，Vue2底層對此做了許多處理，比如：
- 對數(shù)組無法攔截
- 對象屬性的新增與刪除無法攔截
所以Vue3選擇了使用Proxy這個核心API與對象的getter與setter，響應(yīng)式機制的主要功能就是，可以把普通的 JavaScript 對象封裝成為響應(yīng)式對象，攔截數(shù)據(jù)的獲取和修改操作，實現(xiàn)依賴數(shù)據(jù)的自動化更新。接下來我們嘗試動手實現(xiàn)：
reactive
reactive是通過ES6中Proxy來實現(xiàn)屬性攔截的，所以我們可以先來實現(xiàn)一下：
const reactive = <T extends object>(target: T) => {
// 限制reactive只能傳遞引用類型，如果傳遞的不是引用類型，則出警告并將原始值直接返回
if (typeof target !== 'object' || target === null) {
console.warn('Reactive can only be applied to objects');
return target
}
// 返回原始值的代理對象
returnnew Proxy(target, {
get(target, key, receiver) {
const value = Reflect.get(target, key, receiver);
// 這里需要收集依賴（后面實現(xiàn)）
track(target, key);
// 如果值是對象，則遞歸調(diào)用reactive
if (typeof value === 'object' && value !== null) {
return reactive(value);
}
return value;
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
// 這里需要觸發(fā)更新（后面實現(xiàn)）
trigger(target, key)
return result;
},
})
}
exportdefault reactive;Proxy有許多攔截方法，這里我們暫時只需要攔截get與set的操作
- get方法中除了需要返回最新的數(shù)據(jù)，還需要收集依賴
- set方法中除了更新數(shù)據(jù)，還需要執(zhí)行上面收集的依賴
核心架構(gòu)：
track（依賴收集）
接著來實現(xiàn)一下track方法，該方法的主要作用就是收集依賴，這里可以使用Map去進行存儲依賴關(guān)系，Map的key就是我們的代理對象，而value還是一個嵌套的map，存儲代理對象的每個key以及對應(yīng)的依賴函數(shù)數(shù)組，因為每個key都可以有多個依賴
結(jié)構(gòu)如圖：
const targetMap = new WeakMap()
exportconst track = (target: object, key: PropertyKey) => {
// 先找到target對應(yīng)的依賴
let depsMap = targetMap.get(target)
if(!depsMap) {
// 如果沒找到，則說明是第一次收集，需要初始化
depsMap = new Map()
targetMap.set(target, depsMap)
}
// 接著需要對代理對象的屬性進行依賴收集
let deps = depsMap.get(key)
if(!deps) {
deps = new Set()
}
if (!deps.has(activeEffect) && activeEffect) {
// 防止重復(fù)注冊
deps.add(activeEffect)
}
depsMap.set(key, deps)
console.log(`Tracking ${String(key)} on`, target);
};trigger（更新觸發(fā)）
實現(xiàn)完track方法后，我們再來實現(xiàn)一下trigger，該方法的主要作用就是從 targetMap 中，根據(jù) target 和 key 找到對應(yīng)的依賴函數(shù)集合 deps，然后遍歷 deps 執(zhí)行依賴函數(shù)
export const trigger = (target: object, key: PropertyKey) => {
// 先找到target對應(yīng)的依賴map
// console.log('----',targetMap)
const depsMap = targetMap.get(target)
if(!depsMap) return
// 再找到對應(yīng)屬性的依賴
const deps = depsMap.get(key)
// 如果沒有依賴可執(zhí)行，則返回
if(!deps) return
// 最后遍歷整個依賴set分別執(zhí)行
console.log('--deps', deps)
deps.forEach(effect => {
effect?.()
})
};effect（副作用管理）
最后我們再來實現(xiàn)effect副作用函數(shù)，該副作用函數(shù)主要是在依賴更新的時候調(diào)用，它接受一個函數(shù)，在被調(diào)用的時候執(zhí)行這個函數(shù)
在 effectFn 函數(shù)內(nèi)部，把函數(shù)賦值給全局變量 activeEffect；然后執(zhí)行 fn() 的時候，就會觸發(fā)響應(yīng)式對象的 get 函數(shù)，get 函數(shù)內(nèi)部就會把 activeEffect 存儲到依賴地圖中，完成依賴的收集
let activeEffect
export const effect = (fn: () => void) => {
const effectFn = () => {
activeEffect = effectFn
fn()
}
effectFn()
}關(guān)鍵流程：當(dāng)effect執(zhí)行時，內(nèi)部函數(shù)會訪問響應(yīng)式數(shù)據(jù)，觸發(fā)getter→track→將當(dāng)前effect存入依賴集合
驗證
響應(yīng)式底層的幾個核心方法都實現(xiàn)了，現(xiàn)在需要來驗證是否可行，比如：通過reactive處理的數(shù)據(jù)，在數(shù)據(jù)更新時對應(yīng)頁面內(nèi)容也需要更新。
由于沒有寫虛擬DOM與diff算法的邏輯，所以更新的操作我們直接使用DOM API來代替，主要是驗證依賴收集與觸發(fā)更新的邏輯是否符合預(yù)期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div id="content"></div>
<button id="countBtn">count++</button>
</div>
<script type="module">
// ts 部分先編譯成js
import reactive from'./reactive/reactive.js';
import { effect } from'./reactive/effect.js'
// 通過自定義reactive創(chuàng)建響應(yīng)式數(shù)據(jù)
const state = reactive({
count: 0,
name: '南玖'
});
// 注冊副作用函數(shù)，更新視圖
effect(() => {
document.querySelector('#content').innerText = `name: ${state.name} --- car數(shù)量: ${state.count}`
})
// 按鈕點擊操作
document.querySelector('#countBtn').addEventListener('click', () => {
// 數(shù)據(jù)更新
state.count += 1
})
console.log(state); // 0
</script>
</body>
</html>
到這里reactive的響應(yīng)式原理就基本實現(xiàn)了，我們繼續(xù)來實現(xiàn)一下ref的響應(yīng)式邏輯
ref
相比reactive，ref的實現(xiàn)原理更簡單一些，由于ref即可以傳遞基本數(shù)據(jù)類型也可以傳遞引用數(shù)據(jù)類型，而Proxy只能只能接受引用數(shù)據(jù)類型。所以ref采用的是面向?qū)ο蟮?getter 和 setter 攔截了 value 屬性的讀寫，這也是為什么我們 ref 數(shù)據(jù)的 需要通過.value訪問的原因
import { track, trigger } from'./effect'
import reactive from'./reactive'
const ref = (v) => {
returnnew RefImpl(v)
}
class RefImpl {
_value
constructor(v) {
this._value = convert(v)
}
get value() {
track(this, 'value')
returnthis._value
}
set value(val) {
if(val === this._value) return
this._value = convert(val)
console.log('觸發(fā)更新')
trigger(this, 'value')
}
}
const convert = (v) => {
return isObject(v) ? reactive(v) : v
}
const isObject = (v) => {
returntypeof v === 'object' && v !== null
}
exportdefault ref
對于引用類型的數(shù)據(jù)，ref底層會去調(diào)用reactive進行處理
總結(jié)
- 響應(yīng)式核心三角：
- reactive核心：
- 基于Proxy的深度代理
- 嵌套對象自動響應(yīng)化
- 使用WeakMap存儲依賴關(guān)系
- ref核心：
getter/setter攔截value訪問
基本類型與引用類型統(tǒng)一處理
對象類型底層自動調(diào)用reactive
性能優(yōu)化點：
相同值不觸發(fā)更新
WeakMap避免內(nèi)存泄漏
依賴函數(shù)精確收集
