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

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的核心响应式机制,但未处理数组和新增属性


标签:

相关文章

如果百度不收录,如何提高网站人气

假设你是一个新兴的瑜伽品牌,你创建了一个网站来宣传你的瑜伽课程和品牌。然而,你发现百度搜索引擎并没有收录你的网站,这导致你的网站流量和人气较低。以下是你可以采取的一些策略来提高网站人气:优化网站结构:...

海量数据分布式处理

若数据量达到 ‌千万级或 TB 级‌,可结合消息队列(如 RabbitMQ、Kafka)实现分布式消费:// 生产者:将数据分块推送至队列 $redis = new&n...

Vue3组合式API的核心

以下是Vue3组合式API的核心使用方法和实践要点:一、基础使用方式组件定义推荐使用defineComponent()函数定义组件,支持类型推断和setup识别<script setup>...

前端开发中高频出现的易错问题及解决方案整理

🚨 核心运行时错误‌空指针异常(NPE)‌‌场景‌:访问未初始化的对象属性(如 props.item.id)或在异步数据加载前操作 DOM‌解决‌:可选链操作符:props.item?.id...

axios的核心原理

axios的核心原理主要基于Promise和XMLHttpRequest对象实现HTTP请求的封装其核心设计特点包括:跨环境支持同时兼容浏览器和Node.js环境不依赖浏览器全局变量,通过适配器模式实...

DevOps能力

DevOps(Development and Operations)是一种将软件开发(Dev)和运维(Ops)相结合的方法论,旨在通过自动化、协作和持续反馈,实现软件交付和运营的高效集成‌其核心目标是...