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

Vue3响应式原理那些事

news 来源：原创 2025/8/22 18:08:57

文章目录

- 1 响应式基础：Proxy 与 Reflect
- - 1.1 Proxy 代理拦截
  - 1.2 Reflect 确保 `this` 指向正确
  - - 1.2.1 修正 `this` 指向问题
    - 1.2.2 统一的操作返回值
  - 1.3 与 Vue2 的对比
- 2 依赖收集与触发机制
- - 2.1 全局依赖存储结构：WeakMap → Map → Set
  - 2.2 依赖收集触发时机
  - 2.3 依赖收集核心实现：track 函数
  - 2.4 依赖触发：trigger 函数
  - 2.5 副作用管理：ReactiveEffect 类
  - 2.6 特殊场景处理：ref 的依赖收集
  - 2.7 设计亮点
- 3 响应式 API 的封装
- - 3.1. `reactive`
  - 3.2 `ref`
  - 3.3 `reactive` 与 `ref` 核心区别
  - 3.4 注意事项
- 4 双向绑定实现（v-model）
- - 4.1 原生 DOM 元素的实现原理
  - - 4.1.1 属性绑定
    - 4.1.2 响应式更新
  - 4.2 自定义组件的实现原理
  - - 4.2.1 传统模式（Vue3.4 前）
    - 4.2.2 `defineModel` 宏（Vue3.4+）
  - 4.3 响应式系统的支撑
  - 4.4 性能优化与扩展性
- 5 对比 Vue2 的改进

近期文章：

Vue3开发常见性能问题知多少
Vue3组件常见通信方式你了解多少？
实现篇：LRU算法的几种实现
从底层视角看requestAnimationFrame的性能增强
Nginx Upstream了解一下
实现篇：一文搞懂Promise是如何实现的
实现篇：如何手动实现JSON.parse
实现篇：如何亲手定制实现JSON.stringify
一文搞懂 Markdown 文档规则

Vue3 的双向响应式原理是其核心机制，通过 Proxy 代理与 依赖收集系统 实现数据与视图的自动同步。以下是其核心原理与技术细节的深度解析：

1 响应式基础：Proxy 与 Reflect

Vue3 彻底抛弃了 Vue2 的 Object.defineProperty，改用 ES6 Proxy 实现数据劫持，解决了 Vue2 无法监听对象属性新增/删除、数组索引修改等问题。

1.1 Proxy 代理拦截

Proxy 可拦截对象的所有操作（如 get、set、deleteProperty 等），解决了 Vue2 中 Object.defineProperty 无法监听新增属性和数组索引修改的问题。

Proxy 默认采用惰性代理，仅在访问嵌套对象时递归创建代理，优化了性能。

const handler = {get(target, key, receiver) {track(target, key); // 依赖收集return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver);trigger(target, key); // 触发更新return result;}
};
const proxyData = new Proxy(data, handler);

1.2 Reflect 确保 `this` 指向正确

Reflect 的静态方法与 Proxy 的拦截器一一对应，确保操作的一致性和安全性：

1.2.1 修正 `this` 指向问题

当代理对象包含访问器属性（如 get c() { return this.a + this.b }）时，若直接通过 target[key] 读取属性，this 会指向原对象而非代理对象，导致后续属性访问无法触发 Proxy 拦截。

解决方案：使用 Reflect.get(target, key, receiver)，其中 receiver 显式传递代理对象，确保 this 指向正确。

 // 错误示例（this指向原对象）get(target, key) { return target[key]; }// 正确示例（通过Reflect修正this）get(target, key, receiver) { return Reflect.get(target, key, receiver); }

1.2.2 统一的操作返回值

Reflect 方法返回布尔值（如 Reflect.set() 返回操作是否成功），简化了错误处理流程。

1.3 与 Vue2 的对比

特性	Vue2 (Object.defineProperty)	Vue3 (Proxy + Reflect)
属性监听	需遍历属性逐个劫持	代理整个对象，自动处理新增/删除属性
数组支持	需重写数组方法	直接拦截原生数组操作
性能	初始化递归遍历，性能较差	惰性代理，按需触发拦截
代码复杂度	需手动处理嵌套对象和数组	原生支持复杂数据结构

2 依赖收集与触发机制

Vue3 的依赖收集机制通过 Proxy 拦截访问 → 全局拓扑存储 → 精准触发更新 的链路，实现了高效、精准的响应式更新。其 WeakMap 结构、ReactiveEffect 双向链接和 惰性代理 等特性，使得框架具备更高的性能。

2.1 全局依赖存储结构：WeakMap → Map → Set

Vue3 使用三级数据结构管理依赖关系，确保高效的内存管理和精准的依赖追踪：

// 源码位置：packages/reactivity/src/effect.ts
type Dep = Set<ReactiveEffect>;
type KeyToDepMap = Map<any, Dep>;
const targetMap = new WeakMap<any, KeyToDepMap>(); // 全局依赖存储// 结构示意：
WeakMap {[targetObject]: Map {[key]: Set<effect1, effect2...>}
}

WeakMap：键为原始对象（避免内存泄漏），值为 KeyToDepMap。
KeyToDepMap：键为对象属性名，值为 Dep（存储关联的副作用函数集合）。
Dep：Set<ReactiveEffect>，保证副作用的唯一性。

2.2 依赖收集触发时机

当访问响应式对象的属性时，Proxy 的 get 拦截器触发依赖收集流程：

// 源码简化：packages/reactivity/src/baseHandlers.ts
function createGetter() {return function get(target: object, key: string |

Vue3响应式原理那些事

文章目录 1 响应式基础：Proxy 与 Reflect1.1 Proxy 代理拦截1.2 Reflect 确保 `this` 指向正确1.2.1 修正 `this` 指向问题1.2.2 统一的操作返回值1.3 与 Vue2 的对比2 依赖收集与触发机制2.1 全局依赖存储结构：WeakMap → Map → Set2.2 依赖收集触发时机2.3 依赖收集核心实…...

编程日记 2025/8/22 18:08:57

记9（Torch

目录 1、Troch 1、Troch 函数说明举例torch.tensor()torch.arange()创建张量创建一个标量：torch.tensor(42)创建一个一维张量：torch.tensor([1, 2, 3])创建一个二维张量：torch.tensor([[1, 2], [3, 4]])生成一维等差张量：语法&am…...

编程日记 2025/8/22 18:05:31

一、模块结构概览 import numpy as np from sklearn.model_selection import cross_validate, learning_curve from sklearn.pipeline import make_pipeline from sklearn.svm import SVC from sklearn.neighbors import KNeighborsClassifier from sklearn.preprocessing imp…...

编程日记 2025/8/19 8:09:44

健康养生：从微小改变开始

养生不必大刀阔斧，几个微小改变，就能让健康慢慢扎根生活。晨起别急着洗漱，先花 5 分钟靠墙站立，拉伸脊柱、调整体态，唤醒身体。早餐把白米粥换成杂粮粥，搭配水煮蛋和一小碟凉拌黄瓜，营养更全面。…...

编程日记 2025/8/20 4:20:25

某信服EDR3.5.30.ISO安装测试（二）

一、物理机启动EDR 1、修复dracut 使用DiskGenius克隆虚拟磁盘到物理磁盘，将虚拟机移植到物理机，因为磁盘UUID变化等原因，首次默认启动失败，提示： Starting Dracut Emergency Shell... Warning:/dev/centos/root doe…...

编程日记 2025/8/20 4:20:23

Leetcode：回文链表

1、题目描述给定一个链表的头节点 head ，请判断其是否为回文链表。如果一个链表是回文，那么链表节点序列从前往后看和从后往前看是相同的。示例 1： 输入: head [1,2,3,3,2,1] 输出: true 示例 2： 输入: head [1,2] 输出: …...

编程日记 2025/8/20 4:20:21

IL2CPP 技术深度解析

IL2CPP 是 Unity 开发的高性能脚本后端，它将 .NET 的中间语言 (IL) 转换为 C 代码，再编译为原生平台二进制文件。以下是 IL2CPP 的全面技术剖析。一、架构设计原理 1. 整体编译流程 C# 源代码 → Roslyn 编译器 → IL (.NET DLL)→ IL2CPP 转换器 →…...

编程日记 2025/8/22 18:07:32

AI图片修复工具，一键操作，图片更清晰！

泛黄的老相册里藏着一座记忆博物馆，每张照片都是时光长河中的琥珀。祖父军装照上的折痕里藏着抗美援朝的故事，父母结婚照褪色的红唇映照着八十年代的风尚，童年抓拍照上模糊的身影正重演着我们成长的轨迹。这些承载着集体记忆的影像&#xff0…...

编程日记 2025/8/22 17:59:14

国内短剧 vs. 海外短剧系统：如何选择？2025年深度对比与SEO优化指南

在短剧市场爆发式增长的背景下，国内与海外短剧系统成为创业者与企业的热门选择。本文将从市场潜力、开发成本、内容创作、盈利模式及风险五大维度，结合最新行业数据与案例，深度解析两者的优劣势，助您做出最优决策。一、市场前…...

编程日记 2025/8/20 4:20:15

linux crash工具详解

crash 是 Linux 系统中用于分析内核转储文件（如 vmcore 或 kdump 生成的 dump 文件）的核心工具。它结合了调试符号和内核数据结构，能够直观地查看崩溃时的系统状态。以下是其详细使用方法及核心功能解析： 一、安装与准备 1. 安装…...

编程日记 2025/8/20 4:20:13

Scala day6(Class,field,Single Object)

Foreword【こんにちは】 Today, we continue to learn Scala Language, though the Scala isn’t easy for Begainner, Big Data Technology need Scala Language, Spark【Distributed Calculation FrameWork】is based on Scala Language designed. I know the learning road…...

编程日记 2025/8/20 4:20:12

不小心把当前的环境变量路径覆盖掉怎么办

起因配置环境变量（~/.bashrc）的时候没加:$PATH，导致 source ~/.bashrc之后只剩下刚刚配置的环境变量了。连vim都打不开解决添加临时环境变量export PATH/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:$PATH再重新修改…...

编程日记 2025/8/20 4:20:10

unity TMP字体使用出现乱码方框

参考文章： Unity 设置默认字体（支持老版及新版TMP）_unity tmp字体-CSDN博客原因是导入的项目package包没有连着tmp一起，这样在新工程中导入的tmp字体默认的是tmp自己的，解决方案就是替换成自己需要的tmp字体就行替换…...

编程日记 2025/8/20 4:20:09

14.网络钓鱼实战

网络钓鱼实战第一部分：网络钓鱼攻击详解第二部分：设计与分析钓鱼攻击第三部分：钓鱼攻击防范实践总结目标: • 深入理解网络钓鱼攻击的实施过程 • 掌握设计和识别钓鱼攻击的技巧 • 通过模拟实践提升防范钓鱼攻击的能力第一部分&#xf…...

编程日记 2025/8/22 4:48:51

pyqt写一个单片机配置界面

已经实现以下功能 1.可以选择单片机架构 2.选择完单片机架构后第二个框可以选择常见单片机型号 3.选择完常见单片机型号后第三个框可以选择内部资源如adc等（可以选择多个内部资源）4.选择完内部资源如adc等（可以选择多个内部资源）后…...

编程日记 2025/8/20 4:20:05

「Mac畅玩AIGC与多模态20」开发篇16 - 使用结构化输出字段控制后续流程示例

一、概述本篇介绍如何在工作流中使用结构化输出字段作为判断依据，实现前后节点联动控制。通过执行 LLM 节点输出结构化 JSON，并使用其中的字段驱动后续判断节点执行不同路径，开发人员将掌握结构化字段在工作流中的引用方式与分支控制技巧。…...

编程日记 2025/8/20 4:20:03

Unity-Shader详解-其四

今天我们来聊Unity特有的表面着色器以及很少提到的几何着色器。表面着色器在前文关于光照的计算中，我们学会了很多：我们学习了一系列光照模型，比如专门针对漫反射的兰伯特模型和改进的半兰伯特模型，又比如由高光、漫反射和环境…...

编程日记 2025/8/22 17:02:23

Lua 元表和元方法

元表(Metatable)和元方法(Metamethod)是Lua中实现面向对象编程、操作符重载和自定义行为的重要机制。元表元表是一个普通的Lua表，可以附加到另一个表上，用于定义或修改该表的行为。每个表都可以有自己的元表。 setmetatable(tab,metatab) 将metatab设…...

编程日记 2025/8/20 4:20:00

GESP2024年3月认证C++八级( 第二部分判断题（6-10））

海伦公式参考程序： #include <iostream> #include <cmath> // 引入cmath库以使用sqrt函数using namespace std;double calculateTriangleArea(int a, int b, int c) {// 使用海伦公式double s (a b c) / 2.0; // 半周长return sqrt(s * (s - a) *…...

编程日记 2025/8/22 1:25:45

Nacos源码—3.Nacos集群高可用分析一

大纲 1.Nacos集群的几个问题 2.单节点对服务进行心跳健康检查和同步检查结果 3.集群新增服务实例时如何同步给其他节点 4.集群节点的健康状态变动时的数据同步 5.集群新增节点时如何同步已有服务实例数据 1.Nacos集群的几个问题问题一：在单机模式下&#xff…...

编程日记 2025/8/22 17:24:20

信息系统项目管理师-软考高级（软考高项）2025最新（九）

个人笔记整理---仅供参考第九章项目范围管理 9.1管理基础 9.2项目范围管理过程 9.3规划范围管理 9.4收集需求 9.5定义范围 9.6创建WBS 9.7确认范围 9.8控制范围...

编程日记 2025/8/20 7:23:09

DeepSeek学术论文写作全流程指令

一、选题与领域界定研究热点捕捉指令： “在[研究领域]中，现有文献对[具体问题]的[哪方面]研究不足？基于近5年文献归纳3个待突破方向，需结合高频关键词和交叉学科维度。” 示例： “在深度学习医疗影像分析中，现有文献对小样本训练的泛化性研究不足？基于2019-2023年顶会…...

编程日记 2025/8/20 1:39:43

【ArUco boards】标定板检测

之前定位用的Charuco标定板做的（https://blog.csdn.net/qq_45445740/article/details/143897238），因为实际工况中对标定板的尺寸有要求，大概是3cm*2cm这个尺寸，加上选用的是ChAruco标定板，导致每一个aruco码…...

编程日记 2025/8/20 4:19:56

2025 年 408 真题及答案

2025 年 408 真题历年408真题及答案下载直通车 1、以下 C 代码的时间复杂度是多少？（） int count 0; for (int i0; i*i<n; i)for (int j0; j<i; j)count;A O(log2n)B O(n)C O(nlogn)D O(n2) 2、对于括号匹配问题，符号栈…...

编程日记 2025/8/20 4:19:54

设计模式每日硬核训练 Day 18：备忘录模式（Memento Pattern）完整讲解与实战应用

🔄 回顾 Day 17：中介者模式小结在 Day 17 中，我们学习了中介者模式（Mediator Pattern）： 用一个中介者集中管理对象之间的通信。降低对象之间的耦合，适用于聊天系统、GUI 控件联动、塔台调度等…...

编程日记 2025/8/22 4:34:11

ByteArrayOutputStream 类详解

ByteArrayOutputStream 类详解 ByteArrayOutputStream 是 Java 中用于在内存中动态写入字节数据的输出流(ByteArrayOutputStream和ByteArrayInputStream是节点流)，位于 java.io 包。它不需要关联物理文件或网络连接，所有数据都存储在内存的字节数组中。 1. 核心特性内存缓冲…...

编程日记 2025/8/22 11:36:03

Linux中web服务器的部署及优化

前言：Nginx 和 Apache HTTP Server 是两款非常流行的 Web 服务器。 Nginx 简介：Nginx 是一款轻量级的高性能 Web 服务器、反向代理服务器以及电子邮件（IMAP/POP3）代理服务器。由俄罗斯人伊戈尔・赛索耶夫开发，其在处…...

编程日记 2025/8/19 22:43:14

使用Mathematica绘制Sierpinski地毯

在Mathematica中内置的绘制Sierpinski地毯的函数： SierpinskiCurve[n] gives the line segments representing the n-step Sierpiński curve. 注意，直接运行这个函数，返回的是Line对象，例如： 运行如下代码&#xf…...

编程日记 2025/8/20 4:19:48

Qt 信号槽机制底层原理学习

简介 Qt的信号和槽（Signals and Slots）是Qt开发团队创造的一种特殊回调机制，提供了非常简洁易用的事件触发-函数调用机制。原理学习虽然上层使用简单，但底层实现机制却复杂的不得了，这里简单的学习一下大概原理。…...

编程日记 2025/8/20 4:19:47

【Java学习笔记】包

包（package） 包的本质：实际上就是创建不同的文件夹或者目录来保存类文件包的三大作用区分相同名字的类当类很多的时候可以更方便的管理类控制访问范围使用方法关键字：import—>导入（引入） …...

编程日记 2025/8/20 4:19:45

进程的程序替换——exec系列函数的使用

目录前言一、替换函数二、程序替换的本质一些细节： 三、程序替换与环境变量间的关系 1.介绍其他参数的意义并总结 2.自定义环境变量 1）通过execcle传参全局环境变量 2）通过execcle传参自定义环境变量 3）将自定义环境变量通过p…...

编程日记 2025/8/19 20:20:48

【论文阅读】DETR+Deformable DETR

可变形注意力是目前transformer结构中经常使用的一种注意力机制，最近补了一下这类注意力的论文，提出可变形注意力的论文叫Deformable DETR，是在DETR的基础上进行的改进，所以顺带着把原本的DETR也看了一下。一、DETR DETR本身是…...

编程日记 2025/8/20 4:19:41

ArchLinux卡死在GRUB命令行模式修复

ArchLinux卡死在GRUB命令行模式修复文章目录 ArchLinux卡死在GRUB命令行模式修复前言一、系统配置1.系统配置2.磁盘分区信息二、重建GRUB引导1.插入带ArchLinux ISO的U盘，BIOS选择U盘启动并进入ArchLinux安装界面。2.挂载btrfs根目录分区3.挂载/boot分区4.进入ch…...

编程日记 2025/8/20 7:23:07

Docker 容器 - Dockerfile

Docker 容器 - Dockerfile 一、Dockerfile 基本结构二、Dockerfile 指令详解2.1 FROM2.2 MAINTAINER2.3 COPY2.4 ADD2.5 WORKDIR2.6 VOLUME2.7 EXPOSE2.8 ENV2.9 RUN2.10 CMD2.11 ENTRYPOINT 三、Dockerfile 创建镜像与模板3.1 Dockerfile 镜像3.2 镜像管理3.3 Dockerfile 模板…...

编程日记 2025/8/21 8:20:28

C++ 中二级指针的正确释放方法

C 中二级指针的正确释放一、什么是二级指针？ 简单说，二级指针就是指向指针的指针。即： int** p;它可以指向一个 int*，而 int* 又指向一个 int 类型的变量。常见应用场景动态二维数组（例如 int** matrix&#x…...

编程日记 2025/8/19 10:12:54

解释器模式（Interpreter Pattern）

解释器模式（Interpreter Pattern） 是行为型设计模式之一，通常用于处理“语言”类问题，比如计算器、编程语言的解析等。它的核心思想是通过建立一个解释器，解析并解释由语法规则描述的语言，通常以**抽象语法…...

编程日记 2025/8/21 4:48:04

编译原理期末重点-个人总结——1 概论

概述计算机语言的分类低级语言：机器语言（唯一能被计算机执行的），汇编语言高级语言：JAVA ，C 执行高级语言或汇编语言的步骤高级语言程序或汇编语言程序> （通过解释或翻译）转…...

编程日记 2025/8/21 23:39:00

五一作业-day04

文章目录 1. **ps -ef是显示当前系统进程的命令,统计下当前系统一共有多少进程**2. **last命令用于显示所用用户最近1次登录情况,awk可以取出某一列,现在要取出last命令第1列并去重统计次数**3. **secure日志是用户的登录日志,过滤出secure日志中的Failed password的次数(用课堂…...

编程日记 2025/8/20 2:53:00

Java按字节长度截取字符串指南

在Java中，由于字符串可能包含多字节字符(如中文)，直接按字节长度截取可能会导致乱码或截取不准确的问题。以下是几种按字节长度截取字符串的方法： 方法一：使用String的getBytes方法 java public static String substringByBytes(…...

编程日记 2025/8/21 21:02:21

[特殊字符]Git 操作实战：如何将本地项目提交到远程 Gitee 仓库

在日常开发中，我们经常需要将本地开发的项目同步到远程代码仓库中（如 GitHub、Gitee 等），以便团队协作或备份管理。本文将以 Gitee（码云） 为例，详细讲解如何将本地已有项目提交到远程仓库&#…...

编程日记 2025/8/20 7:22:53

【信息系统项目管理师-论文真题】2008上半年论文详解（包括解题思路和写作要点）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录试题1：企业级信息系统项目管理体系的建立1、写作要点2、解题思路项目管理流程和项目管理的工具试题2：项目的质量管理1、写作要点2、解题思路项目的早期阶段如何制定项目质量管理计划如何确保项目质量管理计划…...

编程日记 2025/8/20 7:22:51

C语言|函数的递归调用

函数的递归调用 (逐层分解，逐层合并) 自己调用自己，必须要知道什么时候停止调用，不然会造成电脑死机。【知识点】 1 函数调用是通过栈实现的。多个函数嵌套调用时，会按照先调用后返回的原则进行返回。 2 函数递归必须满足的两…...

编程日记 2025/8/20 7:22:49

QT 在圆的边界画出圆

QT 在圆的边界画出圆 QT 在圆的边界画出实心圆在Qt中，要实现在圆的边界上绘制图形，你需要使用QPainter类来在QWidget或其子类的paintEvent中绘制。下面我将通过一个简单的例子来说明如何在Qt中绘制一个圆，并在其边界上绘制其他图形&#x…...

编程日记 2025/8/19 8:53:29

Guass数据库实验（数据字典设计、交叉表设计）

Assignment 2: Database Design 目录 Assignment 2: Database Design 数据库创建新建用户bit，并创建数据库模式ass2 使用datastdui以该用户远程登陆创建学科数据字典相关表学科门类表一级学科表二级学科表三级学科表学科变更历史表插入数据字典…...

编程日记 2025/8/19 10:13:45

算法题（139）：牛可乐和魔法封印

审题： 本题需要我们将数组中包含在区间x~y之间的数据个数找到并输出思路： 方法一：暴力解法首先我们可以直接遍历一次数组，找到x的索引，然后再找到y的索引，并计算最终的元素个数，这里就要有O&a…...

编程日记 2025/8/21 20:00:02

LeetCode热题100--189.轮转数组--中等

1. 题目给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6,…...

编程日记 2025/8/22 13:13:15