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

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

news 2026/2/8 21:55:39

往期内容：

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

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

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

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

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

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

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

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

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

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

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

🤔思考

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

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进阶教程》第十六课：深入完善响应式系统之单例模式

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

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

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

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

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

Unity ECS和OOP优劣对比

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

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

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

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

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

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

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

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

Flutter组件————Container

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

编程日记 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，后缀为“.xls” 工作本名称改为“CAN_Matrix” 在首行按照列来起名字，在里面只需要填写必须的内容即可。列数名称第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的使用过程中，我们经常会遇到需要回滚到之前某个commit的情况。无论是为了修复错误、撤销更改，还是为了重新组织代码，回滚到特定commit都是一个非常有用的技能。本文将介绍几种常用的回滚方法，帮助读者更好地掌握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接口卡，用于实现多通道高速光纤数据接收和发送，板卡兼容PCIe 2.0和PCIe 3.0规范，利用PCI-E Switch PEX 8748实现FPGA芯片与计算机的通信，计算机与板卡接口处提供PCI-e 16速接口&#xff…...

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

本次实验环境采用centos7.9操作系统，使用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、概述在传统的单体应用中，事务管理相对简单，通常使用数据库的本地事务（如MySQL的BEGIN和COMMIT）来保证数据的一致性。然而，在微服务架构中，由于每个服务都有自己的数据库，跨服务的事务管理变…...

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

Docker Compose 安装 Harbor

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

编程日记 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的开源项目，…...

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

大模型日报 2024-12-18

大模型日报 2024-12-18 大模型资讯标题： 3B模型长思考后击败70B！HuggingFace逆向出o1背后技术细节并开源摘要：这篇文章探讨了小模型在经过长时间思考后，如何在性能上超越更大规模模型的现象。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.在线下载，使用wget命令，直接从官网下载…...

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

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

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

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

.NET重点

B/S C/S B/S： 浏览器端：JavaScript，HTML，CSS 服务器端：ASP（.NET）PHP/JSP 优势：维护方便，易于升级和扩展劣势：服务器负担沉重 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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53