当前位置： 首页 > news >正文

《Vue进阶教程》第十六课：深入完善响应式系统之单例模式

news 文章来源：https://blog.csdn.net/2401_84715637/article/details/144584697 2025/5/10 17:38:59

   往期内容：

《Vue进阶教程》第五课：ref()函数详解(重点)

《Vue进阶教程》第六课：computed()函数详解(上)

《Vue进阶教程》第七课：computed()函数详解(下)

《Vue进阶教程》第八课：watch()函数的基本使用

《Vue进阶教程》第九课：watch()函数的高级使用

《Vue进阶教程》第十课：其它函数

《Vue进阶教程》第十一课：响应式系统介绍

《Vue进阶教程》第十二课：实现一对多

《Vue进阶教程》第十三课：实现依赖收集

《Vue进阶教程》第十四课：改进桶结构

《Vue进阶教程》第十五课：深入完善响应式系统之模块化

🤔思考

  1. 对于同一个源对象每次调用reactive返回的代理对象应该是一样的
  2. 对于一个已经代理过的对象再次代理应该返回的也应该是一样的

1) 实现单例

为了实现单例, 我们需要建立源对象->代理对象的映射关系

  • 如果存在映射, 说明已经代理过了, 直接返回
  • 如果不存在映射, 说明没有代理过, 创建一个新的代理对象返回

定义源对象->代理对象的映射表(使用WeakMap)

reactive.js

// 定义一个副作用函数桶, 存放所有的副作用函数. 每个元素都是一个副作用函数
// 修改 [state -> Map[name: Set(fn, fn), age: Set(fn, fn)], state1 -> Map]
const bucket = new WeakMap()// 建立一个映射表 target -> proxy
const reactiveMap = new WeakMap() // 新增// 定义一个全局变量, 保存当前正在执行的副作用函数
let activeEffect = nullfunction isObject(value) {return typeof value === 'object' && value !== null
}// 收集依赖
function track(target, key) {// 只有activeEffect有值时(保存的副作用函数), 才添加到桶中if (!activeEffect) returnlet depMap = bucket.get(target)if (!depMap) {depMap = new Map()bucket.set(target, depMap)}let depSet = depMap.get(key)if (!depSet) {depSet = new Set()depMap.set(key, depSet)}depSet.add(activeEffect)
}function trigger(target, key) {let depMap = bucket.get(target)if (!depMap) return// 从副作用函数桶中依次取出每一个元素(副作用函数)执行let depSet = depMap.get(key)if (depSet) {depSet.forEach((fn) => fn())}
}
/*** 创建响应式数据*  @param [object]: 普通对象*  @return [Proxy]: 代理对象*/
function reactive(data) {if (!isObject(data)) return// 如果映射表中存在了对应关系if (reactiveMap.has(data)) {// 返回data对应的代理对象return reactiveMap.get(data)}const proxy = new Proxy(data, {get(target, key) {// 在get操作时, 收集依赖track(target, key)return target[key]},set(target, key, value) {target[key] = value// 在set操作时, 触发副作用重新执行trigger(target, key)return true},})// 建立data(源对象)和proxy(代理对象)的映射关系reactiveMap.set(data, proxy)return proxy
}/*** 注册副作用函数*  @param [function]: 需要注册的 副作用函数*/
function effect(fn) {if (typeof fn !== 'function') return// 记录正在执行的副作用函数activeEffect = fn// 调用副作用函数fn()// 重置全局变量activeEffect = null
}

 测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>const source = { name: 'hello' }const p = reactive(source)const p1 = reactive(source)console.log(p === p1) // true</script></body>
</html>

2) 实现重复代理

可以定义一个特殊的标识__v_isReactive

  • 如果存在该标识, 说明已经代理过, 直接返回
  • 如果不存在该标识, 说明没有被代理, 创建新的代理对象

示例

// 定义源对象->代理对象映射表
const reactiveMap = new WeakMap()// 定义一个副作用桶bucket
const bucket = new WeakMap() 
// 定义一个全局变量, 作于保存 `当前副作用函数`
let activeEffect = null// 收集依赖
function track(target, key) {// 根据不同的target, 获取对应的Maplet depMap = bucket.get(target)if (!depMap) {depMap = new Map()bucket.set(target, depMap)}let depSet = depMap.get(key)if (!depSet) {depSet = new Set()depMap.set(key, depSet)}depSet.add(activeEffect)
}// 触发执行
function trigger(target, key) {let depMap = bucket.get(target)if (!depMap) returnlet depSet = depMap.get(key)if (depSet) {// 如果对应的集合存在, 遍历集合中的每个函数depSet.forEach((fn) => fn())}
}/*** 定义响应式*  @param [object] : 普通对象*  @return [Proxy] : 代理对象*/
export function reactive(data) {// 如果传入的data不是一个普通对象, 不处理if (typeof data !== 'object' || data == null) returnif (reactiveMap.has(data)) {// 返回data对应的代理对象return reactiveMap.get(data)}// 如果存在标识, 说明data被代理过了if (data['__v_isReactive']) {return data}const proxy = new Proxy(data, {get(target, key) {if (key == '__v_isReactive') return true // 新增// console.log(`自定义访问${key}`)if (activeEffect != null) {// 收集依赖track(target, key)}return target[key]},set(target, key, value) {// console.log(`自定义设置${key}=${value}`)target[key] = value // 先更新值// 触发更新trigger(target, key)return true},})reactiveMap.set(data, proxy)return proxy
}/*** 注册副作用函数* @params [function]: 要注册的 副作用函数*/
export function effect(fn) {if (typeof fn !== 'function') return// 将当前注册的副作用函数 保存 到全局变量中activeEffect = fn// 执行当前副作用函数, 收集依赖fn()// 重置全局变量activeEffect = null
}

 测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>const source = { name: 'hello' }const p = reactive(source)const p1 = reactive(p)console.log(p === p1) // true</script></body>
</html>

相关文章：

《Vue进阶教程》第十六课：深入完善响应式系统之单例模式

往期内容&#xff1a; 《Vue进阶教程》第五课&#xff1a;ref()函数详解(重点) 《Vue进阶教程》第六课&#xff1a;computed()函数详解(上) 《Vue进阶教程》第七课&#xff1a;computed()函数详解(下) 《Vue进阶教程》第八课&#xff1a;watch()函数的基本使用 《Vue进阶教…...

编程日记 2024/12/24 0:17:45

C语言版解法力扣题：将整数按权重排序

1.题目描述 我们将整数 x 的 权重 定义为按照下述规则将 x 变成 1 所需要的步数&#xff1a; 如果 x 是偶数&#xff0c;那么 x x / 2 如果 x 是奇数&#xff0c;那么 x 3 * x 1 比方说&#xff0c;x3 的权重为 7 。因为 3 需要 7 步变成 1 &#xff08;3 --> 10 -->…...

编程日记 2024/12/24 0:14:42

Unity ECS和OOP优劣对比

OOP的优劣 面向对象编程&#xff08;OOP, Object-Oriented Programming&#xff09;是一种通过对象及其交互来组织代码的编程范式&#xff0c;广泛应用于软件开发中。以下是OOP的优缺点&#xff1a; 优点 代码可重用性 继承机制&#xff1a;通过继承&#xff0c;子类可以复用…...

编程日记 2024/12/24 0:11:38

【Java基础面试题026】Java中的String、StringBuffer和StringBuilder的区别是什么？

回答重点 他们都是Java中处理字符串的类&#xff0c;区别主要体现在可变性、线程安全和性能上 1&#xff09;String 不可变&#xff1a;String是不可变类&#xff0c;字符串对象创建&#xff0c;存储在堆中&#xff0c;字符串内容存储在字符串常量池中&#xff0c;一旦创建内…...

编程日记 2024/12/24 0:10:37

解析在OceanBase创建分区的常见问题｜OceanBase 用户问题精粹

在《分区策略和管理分区计划的实践方案》这篇文章中&#xff0c;我们介绍了在ODC中制定分区策略及有效管理分区计划的经验。有不少用户在该帖下提出了使用中的问题&#xff0c;其中一个关于创建分区的限制条件的问题&#xff0c;也是很多用户遭遇的老问题。因此本文以其为切入&…...

编程日记 2024/12/24 0:07:34

Flutter组件————Container

Container Container 是 Flutter 中最常用的布局组件之一 参数 参数名称类型描述alignmentAlignmentGeometry定义子组件在其内部的对齐方式&#xff0c;默认为 null&#xff0c;即不改变子组件的位置。paddingEdgeInsetsGeometry内边距&#xff0c;用于在子组件周围添加空间…...

编程日记 2024/12/24 0:05:31

Java重要面试名词整理（二）：SpringMyBatis

文章目录 Spring篇Spring核心推断构造方法AOP动态代理Advice的分类Advisor的理解AOP相关的概念 定义BeanASM技术JFR依赖注入循环依赖LifecycleSpring AOT Spring事务Spring事务传播机制Spring事务传播机制是如何实现的呢?Spring事务传播机制分类 SpringMVCHandlerHandlerMappi…...

编程日记 2024/12/24 0:03:29

Excel生成DBC脚本源文件

Excel制作 新建一个Excel&#xff0c;后缀为“.xls” 工作本名称改为“CAN_Matrix” 在首行按照列来起名字&#xff0c;在里面只需要填写必须的内容即可。 列数名称第0列Message Name第1列Message Format第2列Message ID第3列Message Length (byte)第4列Message Transmitte…...

编程日记 2024/12/23 23:59:26

Git进阶：本地或远程仓库如何回滚到之前的某个commit

在Git的使用过程中&#xff0c;我们经常会遇到需要回滚到之前某个commit的情况。无论是为了修复错误、撤销更改&#xff0c;还是为了重新组织代码&#xff0c;回滚到特定commit都是一个非常有用的技能。本文将介绍几种常用的回滚方法&#xff0c;帮助读者更好地掌握Git版本控制…...

编程日记 2024/12/23 23:56:23

linux 中文输入法设置的宏观思路 (****)

乱是永远的不乱，变是永远的不变。 $ ibus help # 注意：help 前没有杠符号 $ setxkbmap -help # 注意：help 前只有一个杠符号 $ localectl --help # 注意：help 前有 2 个杠符号 $ man im-config # 注意：-h, --help 只出来提示信息：请参考。。。。。。。 $ man abc…...

编程日记 2024/12/23 23:48:16

271-基于XC7V690T的12路光纤PCIe接口卡

一、板卡概述 基于XC7V690T的12路光纤PCI-E接口卡&#xff0c;用于实现多通道高速光纤数据接收和发送&#xff0c;板卡兼容PCIe 2.0和PCIe 3.0规范&#xff0c;利用PCI-E Switch PEX 8748实现FPGA芯片与计算机的通信&#xff0c;计算机与板卡接口处提供PCI-e 16速接口&#xff…...

编程日记 2024/12/23 23:41:09

Semaphore UI安装和实践

本次实验环境采用centos7.9操作系统&#xff0c;使用rpm包安装方式。 1.配置yum源 --下载centos华为云镜像仓库 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.huaweicloud.com/repository/conf/CentOS-7-anon.repo[rootlocalhost ~]# wget -O /etc/yum.repos.…...

编程日记 2024/12/23 23:35:04

Redis篇--常见问题篇7--缓存一致性2（分布式事务框架Seata）

1、概述 在传统的单体应用中&#xff0c;事务管理相对简单&#xff0c;通常使用数据库的本地事务&#xff08;如MySQL的BEGIN和COMMIT&#xff09;来保证数据的一致性。然而&#xff0c;在微服务架构中&#xff0c;由于每个服务都有自己的数据库&#xff0c;跨服务的事务管理变…...

编程日记 2024/12/23 23:34:02

Docker Compose 安装 Harbor

我使用的系统是rocky Linux 9 1. 准备环境 确保你的系统已经安装了以下工具&#xff1a; DockerDocker ComposeOpenSSL&#xff08;用于生成证书&#xff09;#如果不需要通过https连接的可以不设置 1.1 安装 Docker 如果尚未安装 Docker&#xff0c;可以参考以下命令安装&…...

编程日记 2024/12/23 23:29:59

使用docker compose安装gitlab

使用docker compose安装gitlab GitLab简介设置GITLAB_HOME路径创建docker挂载目录获取可用的GitLab版本编写docker-compose.yml文件启动docker基础配置GITLAB_OMNIBUS_CONFIG修改配置 中文设置数据库配置系统邮箱配置 GitLab简介 ‌GitLab是一个基于Git的开源项目&#xff0c;…...

编程日记 2024/12/23 23:26:55

大模型日报 2024-12-18

大模型日报 2024-12-18 大模型资讯 标题&#xff1a; 3B模型长思考后击败70B&#xff01;HuggingFace逆向出o1背后技术细节并开源 摘要&#xff1a;这篇文章探讨了小模型在经过长时间思考后&#xff0c;如何在性能上超越更大规模模型的现象。HuggingFace通过逆向工程和开源技术…...

编程日记 2024/12/23 23:24:54

Linux安装mysql5.7

一、下载mysql5.7 ​ 首先我们需要去下载linux版本的mysql-5.7.24的安装包。 1.可以去官方网站链接: https://downloads.mysql.com/archives/community/ ,下载mysql-5.7.24-linux-glibc2.12-x86_64.tar压缩包。 2.在线下载&#xff0c;使用wget命令&#xff0c;直接从官网下载…...

编程日记 2024/12/23 23:21:51

【容器】k8s学习笔记原理详解（十万字超详细）

Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据&am…...

编程日记 2024/12/23 23:19:45

.NET重点

B/S C/S B/S&#xff1a; 浏览器端&#xff1a;JavaScript&#xff0c;HTML&#xff0c;CSS 服务器端&#xff1a;ASP&#xff08;.NET&#xff09;PHP/JSP 优势&#xff1a;维护方便&#xff0c;易于升级和扩展 劣势&#xff1a;服务器负担沉重 C/S java/.NET/VC系列 …...

编程日记 2024/12/23 23:12:38

SMMU软件指南SMMU编程之虚拟机结构和缓存

安全之安全(security)博客目录导读 目录 一、虚拟机结构（VMS） 二、缓存 一、虚拟机结构（VMS） 虚拟机结构（VMS）是SMMU中的概念，是一个由STE.VMSPtr字段指向的结构，包含每个虚拟机的配置设置。在相同安全状态下具有相同虚拟机ID（VMID）的多个STE必须指向相同的VMS。…...

编程日记 2024/12/23 23:09:35

Go 语言并发实战：利用协程处理多个接口进行数据融合

高效地处理多个数据源并将其整合为有意义的结果是开发中一项重要的任务。Go 语言&#xff0c;以其强大的并发特性&#xff0c;为我们提供了优雅而高效的解决方案。那么我们探讨一下如何利用 Go 语言的协程&#xff0c;同时调用多个接口获取数据&#xff0c;并将这些数据无缝地合…...

编程日记 2024/12/23 23:08:34

Redis Hash Tag 知识详解

一、Redis Hash Tag概述 Redis Hash Tag是Redis集群环境里用于控制数据分片的关键机制。在Redis集群中&#xff0c;数据依据键的哈希值来确定分片存储位置。Hash Tag能让用户指定键的特定部分作为哈希计算核心部分&#xff0c;进而使相关键存储于同一节点&#xff0c;这对处理…...

编程日记 2024/12/23 23:03:30

在 Ubuntu 上安装 Muduo 网络库的详细指南

在 Ubuntu 上安装 Muduo 网络库的详细指南 首先一份好的安装教程是非常重要的 C muduo网络库知识分享01 - Linux平台下muduo网络库源码编译安装-CSDN博客 像这篇文章就和shit一样&#xff0c;安装到2%一定会卡住&#xff0c;如果你不幸用了这个那真是遭老罪了 环境&#xf…...

编程日记 2024/12/23 23:01:28

Golang Gin Redis+Mysql 同步查询更新删除操作（我的小GO笔记）

我的需求是在处理几百上千万数据时避免缓存穿透以及缓存击穿情况出现&#xff0c;并且确保数据库和redis同步&#xff0c;为了方便我查询数据操作加了一些条件精准查询和模糊查询以及全字段模糊查询、分页、排序一些小玩意&#xff0c;redis存储是hash表key值也就是数据ID&…...

编程日记 2024/12/23 22:56:24

nodejs搭配express网站开发后端接口设计需要注意事项

nodejs搭配express网站开发后端接口设计需要注意事项&#xff01;为了回避一些常见的误区&#xff0c;今天和大家汇总一下&#xff0c;最近我遇到的一些错误信息&#xff0c;虽然都是小问题&#xff0c;但是还是需要分享一下&#xff0c;以免大家再次犯错。 1&#xff1a;第一个…...

编程日记 2024/12/23 22:54:21

mysql 基于chunk机制是如何支持运行期间，动态调整buffer pool大小的

mysql 基于chunk机制是如何支持运行期间&#xff0c;动态调整buffer pool大小的 MySQL 的 InnoDB 存储引擎确实支持在运行期间动态调整缓冲池&#xff08;buffer pool&#xff09;的大小&#xff0c;但其机制与自定义缓存系统有所不同。InnoDB 通过内部优化和配置参数来实现这…...

编程日记 2024/12/23 22:50:18

智能客户服务：AI与大数据的革新力量

在当今信息技术日新月异的时代&#xff0c;大数据和人工智能&#xff08;AI&#xff09;正逐步成为推动各行各业变革的重要力量。尤其是在客户服务领域&#xff0c;大数据与AI的深度融合正引领着客服系统的全面革新。 一、大数据与AI在智能客服系统中的应用 智能客服系统是一种…...

编程日记 2024/12/23 22:49:17

Python日常使用的自动化脚本

Python日常使用的自动化脚本 LinkDescriptionsort_files根据文件扩展名将目录中的文件组织到子目录中remove_empty_folders删除所有空的文件夹rename_files批量重命名目录中的文件scrape_data从网站上抓取数据download_images从网站批量下载图片count_words统计指定文件中的单…...

编程日记 2024/12/23 22:47:15

代理模式(JDK,CGLIB动态代理,AOP切面编程)

代理模式是一种结构型设计模式&#xff0c;它通过一个代理对象作为中间层来控制对目标对象的访问&#xff0c;从而增强或扩展目标对象的功能&#xff0c;同时保持客户端对目标对象的使用方式一致。 代理模式在Java中的应用,例如 1.统一异常处理 2.Mybatis使用代理 3.Spring…...

编程日记 2024/12/23 22:45:13

【Leetcode 热题 100】236. 二叉树的最近公共祖先

问题背景 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 最近公共祖先的定义为&#xff1a;对于有根树 T T T 的两个节点 p p p、 q q q&#xff0c;最近公共祖先表示为一个节点 x x x&#xff0c;满足 x x x 是 p p p、 q q q 的祖先且 x x x 的深度尽可能大…...

编程日记 2024/12/23 22:37:05