手写一个简易的响应式系统

admin3个月前 (12-09)it知识386

class Dep {  constructor() {    this.subscribers = new Set();  }  depend() {    if (activeEffect) {      this.subscribers.add(activeEffect);    }  }  notify() {    this.subscribers.forEach(effect => effect());  }}let activeEffect = null;function reactive(obj) {  return new Proxy(obj, {    get(target, key) {      const dep = getDep(target, key);      dep.depend();      return Reflect.get(target, key);    },    set(target, key, value) {      const dep = getDep(target, key);      const result = Reflect.set(target, key, value);      dep.notify();      return result;    }  });}function getDep(target, key) {  let depsMap = targetMap.get(target);  if (!depsMap) {    depsMap = new Map();    targetMap.set(target, depsMap);  }  let dep = depsMap.get(key);  if (!dep) {    dep = new Dep();    depsMap.set(key, dep);  }  return dep;}const targetMap = new WeakMap();function effect(fn) {  activeEffect = fn;  fn();  activeEffect = null;}

代码说明:

实现了基本的依赖收集(Dep类)和响应式对象(Proxy代理)

支持对象属性的get/set拦截,自动追踪依赖关系

使用effect函数注册副作用函数,触发时自动更新

通过WeakMap存储依赖关系,避免内存泄漏

模拟了Vue2的核心响应式机制,但未处理数组和新增属性


标签: 分享IT知识

相关文章

夏天的台风

夏天,是一个充满活力和生命力的季节,但同时也伴随着台风的出现。每年的这个时期,台风如同一股强大的自然力量,给人们的生命和财产带来了一定的威胁。在台风的肆虐中,可以看到大自然的威力与无情。台风带来的强风...

黄金秋季

黄金秋季,这是一个充满色彩和韵味的季节。天空湛蓝,阳光明媚,微风轻拂,树叶由绿变黄,由黄变红,最终落叶归根。这是一个大自然最美丽的时刻,一切都在这一刻达到了高潮。秋天的阳光特别柔和,它不像夏天那样灼热...

灵感

灵感的由来可能来自于自然环境、文化背景、生活经验、想象力和创新思维,或其他来源自然环境:大自然以其独特的美丽和秩序,持续激发人类的创造力,自然元素如水、火、空气、土壤和生物等,都为艺术家、科学家和作家...

利用网站挣钱的方式

利用网站挣钱的方式多种多样,以下是一些常见且有效的策略:一、广告收入广告展示:通过在网站上放置广告,利用广告点击率或展示次数获得收益。这可以通过与广告平台(如Google AdSense)合作或直接与...

中山经--山海经

《中山经》薄山之首曰甘枣之山。共水出焉,而西流注于河。其上多杻木;其下有草焉,葵本而杏叶,黄华而荚实,名曰箨,可以已瞢。有兽焉,其状如[虫/虫|犬]鼠而文题,其名曰[嫨能-女],食之已瘿。又东二十里曰...

2025年最赚钱的冷门职业

以下是2025年最具潜力的冷门高薪职业清单,综合政策导向、市场需求及薪资水平分析:一、‌科技前沿领域‌‌氢能科学与工程专家‌新能源政策推动下人才缺口达6.4万,应届生年薪20万起,资深工程师薪资涨幅超...