闭包封装数据、监听器和渲染函数实现状态监听与自动渲染,通过 Proxy 拦截 get/set 完成依赖收集与触发更新,并提供 onUpdate/offUpdate 支持动态注册与清理,防止内存泄漏。

利用闭包实现状态监听器并自动触发渲染,关键在于把“数据”“监听逻辑”和“更新行为”三者用闭包封装起来,让它们共享同一份私有状态,同时通过 Proxy 或 getter/setter 拦截变更,再调用预先注册的渲染函数。
用闭包封装数据与监听器集合
闭包用来保存原始数据副本和待执行的渲染函数列表,确保外部无法直接修改,也避免多个监听器互相干扰。
- 定义一个初始化函数(如 createWatcher),内部声明 data 和 renderers 数组
- 返回的对象只暴露 get、set 和 onUpdate 方法,不暴露内部变量
- 每个调用 createWatcher 的地方都获得独立作用域,支持多实例共存
用 Proxy 拦截读写并关联渲染函数
Proxy 的 get 用于依赖收集,set 用于触发更新;而闭包确保这些操作能持续访问到 renderers 列表。
- 在 get 中不做实际取值,而是记录当前正在执行的渲染函数(比如通过全局临时变量 activeRenderer 标记)
- 在 set 中先更新内部 data,再遍历 renderers 逐个调用
- 注意:set 返回 true 表示赋值成功,否则会抛出 TypeError
注册渲染闭包并自动绑定依赖
渲染函数本身是闭包,它在执行时会读取被代理的数据属性,从而触发 get 拦截器完成依赖登记。
- 调用 onUpdate(fn) 时,先临时设置 activeRenderer = fn
- 再主动读取一次数据(如 watcher.value),触发 get 并把 fn 加入 renderers
- 之后只要 set 被调用,所有已登记的 fn 就会被执行
避免常见陷阱
这类模式容易因引用未清理或闭包持有过大对象导致内存泄漏,尤其在组件卸载时需主动解绑。
- 提供 offUpdate(fn) 方法,支持从 renderers 中移除指定函数
- 组件销毁前调用清理函数,将 renderers 置为空数组,解除对渲染闭包的引用
- 若渲染闭包内使用了 DOM 元素或 canvas 上下文,确保在卸载时一并释放

















