Vue3 和 Vue2 的響應式有很大的不同，由于 Vue3 使用 Proxy 代替了 defineProperty，使得 Vue3 比 Vue2 在響應式數據處理方面有著更好的性能，更簡潔高效的處理方式，還實現了諸多在 Vue2 上無法實現的功能。此外 Vue3 的響應式庫 reactivity 是一個單獨的包，它可以不依賴 Vue 運行，意味著我們可以將它運行在其他框架里。事實上，Vue3 的響應式庫的實現方式以及市面上其他的大多數響應式庫（如 observer-util，meteor 等）的實現方式都是類似的，Vue 也是參考這些庫實現的，所以我們還是很有必要去研究一下的，畢竟咱也不能落伍了 ??，那么各位小伙伴們下面就跟我一起來看下這個 @vue/reactivity 究竟是怎么實現的。
本文章的源碼已經發在了我的 git 上，可以前往查看：reactivity
閱讀本文章之前你要先了解以下知識點
上面這些有不了解的同學可以直接點鏈接查看詳細的文檔，文章里面就不再解釋了。
--
我們首先看一個使用 reactivity 的例子
// 創建一個響應式對象
const state = reactive({ count: 1 })
// 執行effect
effect(() => {
console.log(state.count)
})
state.count = 2 // count改變時執行了effect內的函數，控制臺輸出2
這個例子通過 reactive 創建了一個響應式對象 state，然后調用 effect 執行函數，這個函數內部訪問了 state 的屬性，隨后我們更改這個 state 的屬性，這時，effect 內的函數會再次執行。
這樣一個響應式數據的通常實現的方式是這樣的
- 定義一個數據為響應式（通常通過 defineProperty 或者 Proxy 攔截 get、set 等操作）
- 定義一個副作用函數（effect），這個副作用函數內部訪問到響應式數據時會觸發 1 中的 getter，進而可以在這里將 effect 收集起來
- 修改響應式數據時，就會觸發 1 中的 setter，進而執行 2 中收集到的 effect 函數
關于 effect： effect 在 Vue 里通常叫做副作用函數，因為這種函數內通常執行組件渲染，計算屬性等其他任務。在其他庫里面可能叫觀察者函數（observe）或其他，個人能理解到是什么意思就好，由于本篇文章是分析 Vue3 的，所以統一叫副作用函數（effect）
根據以上的思路，我們就可以開始動手實現了
reactive
首先我們需要有一個 reactive 函數來將我們的數據變為響應式。
// reactive.ts
import { baseHandlers } from './handlers'
import { isObject } from './utils'
type Target = object
const proxyMap = new WeakMap()
export function reactive<T extends object>(target: T): T {
return createReactiveObject(target)
}
function createReactiveObject(target: Target) {
// 只對對象添加reactive
if (!isObject(target)) {
return target
}
// 不能重復定義響應式數據
if (proxyMap.has(target)) {
return proxyMap.get(target)
}
// 通過Proxy攔截對數據的操作
const proxy = new Proxy(target, baseHandlers)
// 數據添加進ProxyMap中
proxyMap.set(target, proxy)
return proxy
}
這里主要對數據做了簡單的判斷，關鍵是在const proxy = new Proxy(target, baseHandlers)中，通過 Proxy 對數據進行處理，這里的baseHandlers就是對數據的 get，set 等攔截操作，下面來實現下baseHandlers
get 收集依賴
首先實現下攔截 get 操作，使得訪問數據的某一個 key 時，可以收集到訪問這個 key 的函數（effect），并把這個函數儲存起來。
// handlers.ts
import { track } from './effect'
import { reactive, Target } from './reactive'
import { isObject } from './utils'
export const baseHandlers: ProxyHandler<object> = {
get(target: Target, key: string | symbol, receiver: object) {
// 收集effect函數
track(target, key)
// 獲取返回值
const res = Reflect.get(target, key, receiver)
// 如果是對象，要再次執行reactive并返回
if (isObject(res)) {
return reactive(res)
}
return res
}
}
這里我們攔截到 get 操作后，通過 track 收集依賴，track 函數做的事情就是把當前的 effect 函數收集起來，執行完 track 后，再獲取到 target 的 key 的值并返回，注意這里是判斷了下 res 是否是對象，如果是對象的話要返回reactive(res)，是因為考慮到可能有多個嵌套對象的情況，而 Proxy 只能修改到到當前對象，并不能修改到子對象，所以在這里要處理下，下面我們需要再實現track函數
// effect.ts
// 存儲依賴
type Deps = Set<ReactiveEffect>
// 通過key去獲取依賴，key => Deps
type DepsMap = Map<any, Deps>
// 通過target去獲取DepsMap，target => DepsMap
const targetMap = new WeakMap<any, DepsMap>()
// 當前正在執行的effect
let activeEffect: ReactiveEffect | undefined
// 收集依賴
export function track(target: object, key: unknown) {
if (!activeEffect) {
return
}
// 獲取到這個target對應的depsMap
let depsMap = targetMap.get(target)
// depsMap不存在時新建一個
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}
// 有了depsMap后，再根據key去獲取這個key所對應的deps
let deps = depsMap.get(key)
// 也是不存在時就新建一個
if (!deps) {
depsMap.set(key, (deps = new Set()))
}
// 將activeEffect添加進deps
if (!deps.has(activeEffect)) {
deps.add(activeEffect)
}
}
注意有兩個 map 和一個 set，targetMap => depsMap => deps，這樣就可以使我們通過 target 和 key 準確地獲取到這個 key 所對應的 deps(effect)，把當前正在執行的 effect（activeEffect）存起來，這樣在修改target[key]的時候，就又可以通過 target 和 key 拿到之前收集到的所有的依賴，并執行它們，這里有個問題就是這個activeEffect它是從哪里來的，get 是怎么知道當前正在執行的 effect 的？這個問題可以先放一放，我們后面再將，下面我們先實現這個 set。
實現 set
// handlers.ts
export const baseHandlers: ProxyHandler<object> = {
get() {
//...
},
set(target: Target, key: string | symbol, value: any, receiver: object) {
// 設置value
const result = Reflect.set(target, key, value, receiver)
// 通知更新
trigger(target, key, value)
return result
}
}
我們在剛才的baseHandlers下面再加一個 set，這個 set 里面主要就是賦值然后通知更新，通知更新通過trigger進行，我們需要拿到在 get 中收集到的依賴，并執行，下面來實現下 trigger 函數
// effect.ts
// 通知更新
export function trigger(target: object, key: any, newValue?: any) {
// 獲取該對象的depsMap
const depsMap = targetMap.get(target)
// 獲取不到時說明沒有觸發過getter
if (!depsMap) {
return
}
// 然后根據key獲取deps，也就是之前存的effect函數
const effects = depsMap.get(key)
// 執行所有的effect函數
if (effects) {
effects.forEach((effect) => {
effect()
})
}
}
這個 trigger 就是獲取到之前收集的 effect 然后執行。
其實除了 get 和 set，還有個常用的操作，就是刪除屬性，現在我們還不能攔截到刪除操作，下面我們來實現下
實現 deleteProperty
export const baseHandlers: ProxyHandler<object> = {
get() {
//...
},
set() {
//...
},
deleteProperty(target: Target, key: string | symbol) {
// 判斷要刪除的key是否存在
const hadKey = hasOwn(target, key)
// 執行刪除操作
const result = Reflect.deleteProperty(target, key)
// 只在存在key并且刪除成功時再通知更新
if (hadKey && result) {
trigger(target, key, undefined)
}
return result
}
}
我們在剛才的baseHandlers里面再加一個deleteProperty，它可以攔截到對數據的刪除操作，在這里我們需要先判斷下刪除的 key 是否存在，因為可能用戶會刪除一個并不存在 key，然后執行刪除，我們只在存在 key 并且刪除成功時再通知更新，因為如果 key 不存在時，這個刪除是無意義的，也就不需要更新，再有就是如果刪除操作失敗的話，也不需要更新，最后直接觸發trigger就可以了，注意這里的第三個參數即 value 是undefined
現在我們已經實現了get，set，deleteProperty這三種操作的攔截，還記不記得在track函數中的activeEffect，那里留了個問題，就是這個activeEffect是怎么來的？，在最開始的例子里面，我們要通過 effect 執行函數，這個activeEffect就是在這里設置的，下面我們來實現下這個effect函數。
// effect.ts
type ReactiveEffect<T = any> = () => T
// 存儲effect的調用棧
const effectStack: ReactiveEffect[] = []
export function effect<T = any>(fn: () => T): ReactiveEffect<T> {
// 創建一個effect函數
const effect = createReactiveEffect(fn)
return effect
}
function createReactiveEffect<T = any>(fn: () => T): ReactiveEffect<T> {
const effect = function reactiveEffect() {
// 當前effectStack調用棧不存在這個effect時再執行，避免死循環
if (!effectStack.includes(effect)) {
try {
// 把當前的effectStack添加進effectStack
effectStack.push(effect)
// 設置當前的effect，這樣Proxy中的getter就可以訪問到了
activeEffect = effect
// 執行函數
return fn()
} finally {
// 執行完后就將當前這個effect出棧
effectStack.pop()
// 把activeEffect恢復
activeEffect = effectStack[effectStack.length - 1]
}
}
} as ReactiveEffect<T>
return effect
}
這里主要是通過createReactiveEffect創建一個 effect 函數，fn 就是調用 effect 時傳入的函數，在執行這個 fn 之前，先通過effectStack.push(effect)把這個 effect 推入 effectStack 棧中，因為 effect 可能存在嵌套調用的情況，保存下來就可以獲取到一個完整的 effect 調用棧，就可以通過上面的effectStack.includes(effect)判斷是否存在循環調用的情況了，然后再activeEffect = effect設置 activeEffect，設置完之后再執行 fn，因為這個 activeEffect 是全局唯一的，所以我們執行 fn 的時候，如果內部訪問了響應式數據，就可以在 getter 里拿到這個 activeEffect，進而收集它。
現在基本上是完成了，現在通過我們寫的這個 reactivity 庫就可以實現例子中的效果了，但是還有一些邊界情況需要考慮，下篇文章就添加一些常見的邊界情況處理。
