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

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


标签:

相关文章

故事分解结构

故事分解结构是一种用于分析、设计和编写故事的方法,它可以将故事分解为不同的层次,从而更好地理解故事的内在逻辑和结构。下面是故事分解结构的详细解释:节拍(beat):是故事的最小单位,包含动作和反应两个...

《山海经》中的一卷--南山经

《南山经》是中国古代神话典籍《山海经》中的一卷,内容描述了南方诸多山系及其中的奇珍异兽、神话传说等。以下是《南山经》的简要翻译概述(请注意,由于《山海经》的内容包含大量神话元素和夸张描述,翻译时尽量保...

前端-网络问题

1. 什么是HTTP?它是如何工作的?答案:HTTP(Hypertext Transfer Protocol)是一种用于在Web上传输数据的协议。它使用客户端-服务器模型,客户端发送HTTP请求到服务...

Pinia在vue3中的使用

一、安装和初始化Pinia首先,你需要通过npm或yarn安装Pinia:npm install piniayarn add pinia安装完成后,你需要在Vu...

Dart 语言

一、Dart 语言基础与开发环境1. Dart 语言概述Dart 是由 Google 开发的客户端优化编程语言,具备以下核心特性:‌跨平台支持‌:可编译为原生代码或 JavaScript,适用于移动、...

前端最新语法糖

以下是2025年前端开发中值得关注的最新语法糖特性:一、JavaScript/ES2025新语法糖模式匹配(Pattern Matching)通过match/when语法替代传统if-else链,使条...