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

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

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知识

相关文章

优美程序是怎样的

程序优美是一个主观的概念,每个人可能会有不同的看法。然而,以下是一些可能导致程序优美的因素:简洁性:优美的程序应该尽可能地简洁明了。这意味着应该使用尽可能少的数据结构和算法,以及尽可能简单的代码。可读...

如何快速建立一个网站

要快速建立一个网站,可以遵循以下步骤:确定网站的目的和需求:在开始建立网站之前,需要明确网站的目的和目标受众,以及网站需要提供哪些内容和服务。这有助于确定网站的设计、功能和内容。选择合适的网站建设平台...

更创新的挣钱方式

在探讨更创新的利用网站挣钱的方式时,我们可以结合当前的技术趋势和市场需求,挖掘一些具有前瞻性和独特性的策略。以下是一些建议:一、基于大数据与人工智能的个性化服务智能推荐系统:利用大数据和人工智能技术,...

前端-网络问题

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

前端对象-object

前端对象是JavaScript中用于表示数据和功能集合的核心概念,其设计遵循“万物皆对象”的抽象原则。以下从多个维度进行说明:一、对象定义与特征‌本质‌对象是由键值对构成的无序数据集合,键名与对应的值...

JavaScript 中 Object

一、Object 基本概念JavaScript 的 Object 是存储键值对(属性和方法)的集合,所有对象(如 Array、Function 等)均继承自 Object.prototype...