当前位置：首页 > news >正文

第十九节：编码实操题-手写简易响应式系统

news 来源：原创 2025/4/29 9:27:02

手写简易响应式系统实现指南（基于 Proxy + 依赖收集）

一、核心架构设计

数据劫持层
采用 Proxy 实现对象属性拦截（Vue3方案），相比 Object.defineProperty 支持数组和动态属性监听。

function reactive(obj) {return new Proxy(obj, {get(target, key) {track(target, key) // 依赖收集return Reflect.get(target, key)},set(target, key, value) {Reflect.set(target, key, value)trigger(target, key) // 触发更新return true}})
}

依赖管理模块
使用 WeakMap + Map 实现三级存储结构，避免内存泄漏：

const targetMap = new WeakMap()function track(target, key) {if (!activeEffect) returnlet depsMap = targetMap.get(target)if (!depsMap) targetMap.set(target, (depsMap = new Map()))let dep = depsMap.get(key)if (!dep) depsMap.set(key, (dep = new Set()))dep.add(activeEffect)
}function trigger(target, key) {const depsMap = targetMap.get(target)if (!depsMap) returndepsMap.get(key)?.forEach(effect => effect())
}

二、完整实现代码

// 全局存储结构
const targetMap = new WeakMap()
let activeEffect = nullclass Dep {constructor() {this.effects = new Set()}depend() {if (activeEffect) this.effects.add(activeEffect)}notify() {this.effects.forEach(fn => fn())}
}function reactive(obj) {return new Proxy(obj, {get(target, key, receiver) {const dep = getDep(target, key)dep.depend()return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)const dep = getDep(target, key)dep.notify()return result}})
}function getDep(target, key) {let depsMap = targetMap.get(target)if (!depsMap) targetMap.set(target, (depsMap = new Map()))let dep = depsMap.get(key)if (!dep) depsMap.set(key, (dep = new Dep()))return dep
}function effect(fn) {const wrapper = () => {activeEffect = wrapperfn()activeEffect = null}wrapper()
}

三、对比 Vue2 实现方案
Object.defineProperty 实现要点：

function defineReactive(obj, key) {let value = obj[key]const dep = new Dep()Object.defineProperty(obj, key, {get() {dep.depend()return value},set(newVal) {value = newValdep.notify()}})
}

局限性对比：

特性	Proxy方案	defineProperty方案
数组监听	✅ 原生支持	❌ 需重写方法
动态属性	✅ 自动监听	❌ 需显式声明
嵌套对象	✅ 递归代理	✅ 递归定义
性能	⚡️ 更优	⚠️ 万级数据较慢

四、测试用例与效果验证

// 测试响应式对象
const state = reactive({ count: 0 })// 注册副作用函数
effect(() => {console.log(`Count changed: ${state.count}`)
})// 修改数据触发更新
state.count++  // 输出 "Count changed: 1"
state.count = 5 // 输出 "Count changed: 5"// 动态新增属性
state.newProp = 'test' 
effect(() => {console.log(`New prop: ${state.newProp}`)
}) // 自动触发

五、工程化扩展方向

嵌套对象处理
递归代理深层属性：

get(target, key) {const value = Reflect.get(...arguments)return typeof value === 'object' ? reactive(value) : value
}

数组方法重写
拦截 push/pop 等原型方法：

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
['push','pop'].forEach(method => {const original = arrayProto[method]arrayMethods[method] = function(...args) {const result = original.apply(this, args)this.__ob__.dep.notify()return result}
})