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

vue3的reactive源码解析

news 2025/12/12 17:17:25

reactive源码解析

总结一句: reactive是个函数。reactive函数返回了一个createReactiveObject函数，createReactiveObject又返回了一个“经new Proxy实例化”的对象。
详细介绍: 我们使用时传给reactive函数一个对象类型target，reactive又将target传给createReactiveObject函数做为第一个参数，createReactiveObject接收三个参数，第一个是taget,第二个是mutableHandlers，第三个是reactiveMap，最后对target使用proxy实例化，并将实例化的对象返回。其中mutableHandlers是一个对象，里面有get set函数用于收集依赖和触发依赖，reactiveMap是一个经过new WeakMap的实例化容器，用于收集响应式数据。

  • mutableHandlers里有get set函数
    1、get函数内部除了使用Reflect.get来获取值并返回外，还使用track函数进行收集依赖。track函数是如何收集依赖的呢？实例化一个全局WeakMap变量targetMap，当成所有响应式数据的收集依赖容器，把数据本身target当成targetMap的key，实例化一个Map作为值取名depsMap，而depsMap内把数据内的属性做为key，实例化一个Set取名为dep作为值，而dep内存着这个数据对应属性对应的所有依赖。
    2、set函数内部除了使用Reflect.set设置值并返回外，还使用trigger函数触发依赖。trigger是怎么触发依赖的呢？首先先从全局变量依赖容器targetMap中根据本身数据taget获取数据取名depsMap，如果没有depsMap直接结束函数，有depsMap再从depsMap里根据对应的属性获取出dep，如果没有dep就结束函数，有dep就遍历里面的所有元素并调用run()函数重新触发里面的所有依赖。
  • reactiveMap是使用new WeakMap出来的收集所有响应式数据的全局变量容器
    1、当数据将要new proxy前,需要根据数据target从容器reactiveMap中获取数据来判断该数据是不是已经被响应式过了，能获取到说明已经响应式过则直接返回即可，没有获取到使用new proxy响应式数据，并把响应式过的数据存在reactiveMap容器中。
  1. 为什么reactive只能对复杂类型进行响应式？
    因为reactive内部使用的是proxy,而proxy只能接收复杂类型，不能接收简单类型。
  2. 为什么reactive内部的set get函数 需要调用Reflect.get Reflect.set呢？
    因为有时候我们代码的this并不是指向proxy,这样都导致set get内触发不正确，而Reflect.get Reflect.set的第三个参数可以让this直接指向proxy

相关文章：

vue3的reactive源码解析

reactive源码解析 总结一句: reactive是个函数。reactive函数返回了一个createReactiveObject函数，createReactiveObject又返回了一个“经new Proxy实例化”的对象。 详细介绍: 我们使用时传给reactive函数一个对象类型target，reactive又将target传给cr…...

编程日记 2023/11/4 7:41:45

【ElasticSearch系列-04】ElasticSearch的聚合查询操作

ElasticSearch系列整体栏目 内容链接地址【一】ElasticSearch下载和安装https://zhenghuisheng.blog.csdn.net/article/details/129260827【二】ElasticSearch概念和基本操作https://blog.csdn.net/zhenghuishengq/article/details/134121631【三】ElasticSearch的高级查询Quer…...

编程日记 2023/11/4 7:40:43

Redisson初始

最近的自己,一直都在做些老年的技术,没有啥升级,自己也快麻木了,自己该怎么说,那必须行动起来啊!~来来,我们一起增长自己的内功 分布式锁的最强实现: Redisson 1.概念 在介绍之前,我们要知道这个Redisson是啥? 难道就是Redis的son?(我第一次就这么认为的哈哈!) 事实也的确如…...

编程日记 2023/11/4 7:39:43

【华为OD题库-018】AI面板识别-Java

题目 Al识别到面板上有N(1<N≤100)个指示灯&#xff0c;灯大小一样&#xff0c;任意两个之间无重叠。由于AI识别误差&#xff0c;每次识别到的指示灯位置可能有差异&#xff0c;以4个坐标值描述Al识别的指示灯的大小和位置(左上角x1,y1&#xff0c;右下角x2.y2)。请输出先行…...

编程日记 2023/11/4 7:38:42

[概述] 点云滤波器

拓扑结构 点云是一种三维数据&#xff0c;有几种方法可以描述其空间结构&#xff0c;以利于展开搜索 https://blog.csdn.net/weixin_45824067/article/details/131317939 KD树 头文件&#xff1a;pcl/kdtree/kdtree_flann.h 函数&#xff1a;pcl::KdTreeFLANN 作用&#xff1a…...

编程日记 2023/11/4 7:37:41

[笔记] 汉字判断

参考博客&#xff1a;如果判断一个字符是西文字符还是中文字符 结论&#xff1a; 汉字转数字后&#xff0c;会占两位字符位&#xff0c;两位都是负数。 参考下面代码 输入&#xff1a;你 输出&#xff1a;01 #include<bits/stdc.h> using namespace std; int main() {cha…...

编程日记 2023/11/4 7:36:39

Android开发笔记（三）—Activity篇

活动组件Activity 启动和结束生命周期启动模式信息传递Intent显式Intent隐式Intent 向下一个Activity发送数据向上一个Activity返回数据 附加信息利用资源文件配置字符串利用元数据传递配置信息给应用页面注册快捷方式 启动和结束 &#xff08;1&#xff09;从当前页面跳到新页…...

编程日记 2023/11/4 7:34:37

nodejs+vue+python+php在线购票系统的设计与实现-毕业设计

伴随着信息时代的到来&#xff0c;以及不断发展起来的微电子技术&#xff0c;这些都为在线购票带来了很好的发展条件。同时&#xff0c;在线购票的范围不断增大&#xff0c;这就需要有一种既能使用又能使用的、便于使用的、便于使用的系统来对其进行管理。在目前这种大环境下&a…...

编程日记 2023/11/4 7:33:35

基于Taro + React 实现微信小程序半圆滑块组件、半圆进度条、弧形进度条、半圆滑行轨道（附源码）

效果&#xff1a; 功能点&#xff1a; 1、四个档位 2、可点击加减切换档位 3、可以点击区域切换档位 4、可以滑动切换档位 目的&#xff1a; 给大家提供一些实现思路&#xff0c;找了一圈&#xff0c;一些文章基本不能直接用&#xff0c;错漏百出&#xff0c;代码还藏着掖…...

编程日记 2023/11/4 7:32:34

城市内涝解决方案：实时监测，提前预警，让城市更安全

城市内涝积水问题是指城市地区在短时间内遭遇强降雨后&#xff0c;地面积水过多&#xff0c;导致城市交通堵塞、居民生活不便、财产损失等问题。近年来&#xff0c;随着全球气候变化和城市化进程的加速&#xff0c;城市内涝积水问题越来越突出&#xff0c;成为城市发展中的一大…...

编程日记 2023/11/4 7:31:32

编译正点原子LINUXB报错make: arm-linux-gnueabihf-gcc：命令未找到

编译正点原子LINUX报错make: arm-linux-gnueabihf-gcc&#xff1a;命令未找到 1.报错内容2.解决办法3./bin/sh: 1: lzop: not found4.编译成功 1.报错内容 make: arm-linux-gnueabihf-gcc&#xff1a;命令未找到CHK include/config/kernel.releaseCHK include/generat…...

编程日记 2023/11/4 7:30:30

工地现场智慧管理信息化解决方案 智慧工地源码

智慧工地系统充分利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术&#xff0c;以PC端&#xff0c;移动端&#xff0c;设备端三位一体的管控方式为企业现场工程管理提供了先进的技术手段。让劳务、设备、物料、安全、环境、能源、资料、计划、质量、视频监控等…...

编程日记 2023/11/4 7:28:28

Javaweb之HTML,CSS的详细解析

2. HTML & CSS 1). 什么是HTML ? HTML: HyperText Markup Language&#xff0c;超文本标记语言。 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;由标签构成的语言…...

编程日记 2023/11/4 7:27:26

基于python+django+vue开发的酒店预订管理系统 - 毕业设计 - 课程设计

文章目录 源码下载地址项目介绍项目功能界面预览项目备注毕设定制&#xff0c;咨询 源码下载地址 点击这里下载源码 项目介绍 该系统是基于pythondjango开发的酒店预定管理系统。适用场景&#xff1a;大学生、课程作业、毕业设计。学习过程中&#xff0c;如遇问题可在github…...

编程日记 2023/11/4 7:26:25

使用vscode实现远程开发，并通过内网穿透在公网环境下远程连接

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…...

编程日记 2023/11/4 7:25:24

ArrayList集合2

ArrayList集合的一些方法 ⑥chear()从列表中移除所有元素 ⑦.isEmpty()判断列表中是否包含元素&#xff0c;不包含返回true&#xff0c;否则返回false public class Test{public static void main(String[] args){Arraylist<String> list new Arraylist<String>()…...

编程日记 2023/11/4 7:23:22

vue+asp.net Web api前后端分离项目发布部署

一、前后端项目介绍 1.前端项目是使用vue脚手架进行创建的。 脚手架版本&#xff1a;vue/cli 5.0.8 编译器版本&#xff1a;vs code 1.82.2 2.后端是一个asp.net Core Web API 项目 后端框架版本&#xff1a;.NET 6.0 编译器版本&#xff1a;vs 2022 二、发布部署步骤 第…...

编程日记 2023/11/4 7:22:22

iOS App Store上传项目报错 缺少隐私政策网址(URL)解决方法

​ iOS App Store上传项目报错 缺少隐私政策网址(URL)解决方法 一、问题如下图所示&#xff1a; ​ 二、解决办法&#xff1a;使用Google浏览器&#xff08;翻译成中文&#xff09;直接打开该网址 https://www.freeprivacypolicy.com/free-privacy-policy-generator.php 按…...

编程日记 2023/11/4 7:21:20

如何使用Ruby 多线程爬取数据

现在比较主流的爬虫应该是用python&#xff0c;之前也写了很多关于python的文章。今天在这里我们主要说说ruby。我觉得ruby也是ok的&#xff0c;我试试看写了一个爬虫的小程序&#xff0c;并作出相应的解析。 Ruby中实现网页抓取&#xff0c;一般用的是mechanize&#xff0c;使…...

编程日记 2023/11/4 7:20:19

一文深入了解 CPU 的型号、代际架构与微架构

在 10 月 16 号的时候&#xff0c;Intel 正式发布了第 14 代的酷睿处理器。但还有很多同学看不懂这种发布会上发布的各种 CPU 参数。借着这个时机&#xff0c;给大家深入地讲讲 CPU 的型号规则、代际架构与微架构方面的知识。 CPU 在整个计算机硬件中、技术体系中都算是最最重…...

编程日记 2023/11/4 7:19:19

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/12/7 22:10:14

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/12/8 14:49:41

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/11/30 16:55:20

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/9 1:32:02

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/12/9 4:34:34

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/12/12 6:00:18

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2025/12/12 13:51:47

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40