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

Vue 3 的响应式原理

news 来源：原创 2025/9/2 14:07:31

Vue 3 的响应式原理可以比喻为“智能监控系统”：当数据变化时，它能自动追踪依赖关系并触发更新。以下是通俗解释和核心机制：

一、核心原理：Proxy 代理

Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象实现（Vue 2 使用 Object.defineProperty）。
Proxy 的优势：

支持动态新增属性（无需 Vue.set）
支持数组索引和长度变化
性能更好（无需递归遍历对象）

二、实现步骤：如何让数据“活”起来？

1. 创建响应式对象

用 reactive() 包裹普通对象，返回一个 Proxy 代理对象：

import { reactive } from 'vue';const state = reactive({count: 0,list: ['Apple', 'Banana']
});

Proxy 的拦截行为：

当你访问 state.count（get 操作）→ 收集依赖（记录谁在用这个值）。
当你修改 state.count（set 操作）→ 触发更新（通知依赖它的地方更新）。

2. 依赖收集（Tracking Dependencies）

当模板或计算属性访问响应式数据时，Vue 会记录这个关系：

<template><div>{{ state.count }}</div>  <!-- 访问 state.count → 建立依赖 -->
</template>

原理：

通过 effect 函数（类似“监听器”）包裹需要响应式执行的代码。
当代码执行时，所有被访问的响应式属性会自动收集当前 effect 作为依赖。

3. 触发更新（Triggering Updates）

当数据变化时，Proxy 的 set 拦截器会找到所有关联的 effect 并重新执行它们：

state.count = 10; // 触发 set → 通知所有依赖的 effect 更新

三、核心 API 的差异

1. `reactive` vs `ref`

reactive：针对对象（Object、Array）的深度代理。
```
const obj = reactive({ a: 1 });
```
ref：针对基本类型（string、number、boolean），通过 .value 访问。
```
const count = ref(0);
console.log(count.value); // 0
```
为什么需要 ref：
Proxy 无法直接代理基本类型，ref 将值包装在 { value: ... } 对象中，再对这个对象做响应式处理。

2. `effect` 函数

Vue 内部通过 effect 实现依赖追踪和更新触发（开发者通常通过 watch 或 computed 间接使用）：

import { effect } from 'vue';effect(() => {console.log('count变化了:', state.count); // 自动追踪 state.count
});

四、简单实现（极简版）

// 极简响应式系统
function reactive(obj) {return new Proxy(obj, {get(target, key) {track(target, key); // 收集依赖return target[key];},set(target, key, value) {target[key] = value;trigger(target, key); // 触发更新return true;}});
}// 依赖收集和触发
let activeEffect = null;
const depsMap = new Map();function track(target, key) {if (activeEffect) {let dep = depsMap.get(target)?.get(key);if (!dep) {dep = new Set();depsMap.set(target, (depsMap.get(target) || new Map()).set(key, dep));}dep.add(activeEffect);}
}function trigger(target, key) {const dep = depsMap.get(target)?.get(key);dep?.forEach(effect => effect());
}function effect(fn) {activeEffect = fn;fn(); // 首次执行以收集依赖activeEffect = null;
}

五、关键特点

嵌套对象自动代理
reactive 会递归代理对象的所有嵌套属性。
懒代理
Vue 3 不会立即代理所有属性，只有被访问到的属性才会被代理（性能优化）。
数组处理优化
直接通过索引修改数组或修改 length 属性也能触发更新。

六、开发者注意事项

避免解构响应式对象
解构会破坏代理关系，导致失去响应性：

const { count } = state; // ❌ 错误！count 不再是响应式的
const count = ref(state.count); // ✅ 正确

使用 toRefs 保持响应性
解构时保持响应式：

import { toRefs } from 'vue';
const { count } = toRefs(state); // 通过 .value 访问

七、总结

Vue 3 的响应式系统像一个“智能摄像头”：

监控数据访问（get）：记录谁在关注这个数据。
监控数据修改（set）：通知所有关注者更新。
自动化管理依赖：开发者只需关注数据变化，视图自动同步。

通过 Proxy 的强大能力，Vue 3 解决了 Vue 2 的诸多限制（如数组和新增属性的响应问题），同时提升了性能和开发体验。

Vue 3 的响应式原理

Vue 3 的响应式原理可以比喻为“智能监控系统”：当数据变化时，它能自动追踪依赖关系并触发更新。以下是通俗解释和核心机制： 一、核心原理：Proxy 代理 Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象实现（Vue 2 使…...

编程日记 2025/9/2 14:07:31

使用Scrapy官方开发的爬虫部署、运行、管理工具：Scrapyd

一般情况下，爬虫会使用云服务器来运行，这样可以保证爬虫24h不间断运行。但是如何把爬虫放到云服务器上面去呢？有人说用FTP，有人说用Git，有人说用Docker。但是它们都有很多问题。 FTP：使用FTP来上传…...

编程日记 2025/9/2 13:59:05

基于51单片机和8X8点阵屏、独立按键的单人弹球小游戏

目录系列文章目录前言一、效果展示二、原理分析三、各模块代码1、8X8点阵屏2、独立按键3、定时器04、定时器1 四、主函数总结系列文章目录前言用的是普中A2开发板，用到板上的独立按键、8X8点阵屏。【单片机】STC89C52RC 【频率】12T11.0592MHz 效果查看/操作…...

编程日记 2025/9/2 14:03:23

群体智能避障革命：RVO算法在Unity中的深度实践与优化

引言：游戏群体移动的挑战与进化在《全面战争》中万人战场恢弘列阵，在《刺客信条》闹市里人群自然涌动，这些令人惊叹的场景背后，都离不开一个关键技术——群体动态避障。传统路径规划算法（如A*）虽能解决单…...

编程日记 2025/9/2 14:06:38

Java 实现选择排序：[通俗易懂的排序算法系列之一]

引言大家好！从今天开始，我计划写一个关于常见排序算法的系列文章，旨在用通俗易懂的方式，结合 Java 代码实现，帮助大家理解和掌握这些基础但非常重要的数据结构与算法知识。排序是计算机科学中最基本的操作之一&…...

编程日记 2025/9/2 14:04:24

动画过渡设置

使用Animator的Trigger参数步骤 1：打开 Animator 窗口确保你的 Sprite 对象已添加 Animator 组件。在 Unity 编辑器顶部菜单栏，选择 Window > Animation > Animator，打开 Animator 窗口。步骤 2：创建 Trigger 参数在…...

编程日记 2025/9/2 13:59:06

【项目管理-高项】学习方法整体概览

相关文档，希望互相学习，共同进步风123456789～-CSDN博客 1.背景 📝 软考高项,全称信息系统项目管理师 ,是软考高级资格项目之一。本考试考三门科目：综合知识（上午）、案例分析（下午…...

编程日记 2025/9/2 13:59:51

HarmonyOS应用开发者高级-编程题-001

题目一：跨设备分布式数据同步需求描述开发一个分布式待办事项应用，要求： 手机与平板登录同一华为账号时，自动同步任务列表任一设备修改任务状态（完成/删除），另一设备实时更新任务数据在设备…...

编程日记 2025/8/29 7:41:20

HarmonyOS-ArkUI Ability进阶系列-UIAbility与各类Context

UIAbility及相关类关系一个模块编译的时候会出一个HAP包， 每一个HAP包在运行时都对应一个AbilityStage。 AbilityStage持有一个AbilityStageContext一个APP， 有时候会有很多个HAP包， 至少一个。一个APP运行时，对应的是我们的App…...

编程日记 2025/8/30 13:22:29

接口并行执行且流式顺序输出的解决方案： import asyncio from aiotas_agi2all_llms_utils.output_answer_from_ask_question_results import (reasoning_model_ask_question, ) import os from aiotas_agi2all_llms_utils.logging_utils import create_logger import uuid fr…...

编程日记 2025/8/28 1:38:39

浅谈AI - DeepSpeed - 单卡慎用！

前言曾在游戏世界挥洒创意，也曾在前端和后端的浪潮间穿梭，如今，而立的我仰望AI的璀璨星空，心潮澎湃，步履不停！愿你我皆乘风破浪，逐梦星辰！ 简介 Deepspeed 的 ZeRO（Ze…...

编程日记 2025/8/31 20:46:31

Java Web从入门到精通：全面探索与实战（一）

目录引言：开启 Java Web 之旅一、Java Web 基础概念大揭秘 1.1 什么是 Java Web 1.2 Java Web 的优势剖析 1.3 Java Web 相关核心概念详解二、搭建 Java Web 开发环境：步步为营 2.1 所需软件大盘点 2.2 软件安装与配置全流程三…...

编程日记 2025/8/28 4:08:23

5G从专家到小白

文章目录第五代移动通信技术（5G）简介应用场景数据传输率带宽频段频段 VS 带宽中低频（6 GHz以下）：覆盖范围广、穿透力强高频（24 GHz以上）：满足在热点区域提升容量的需求毫米波热点区…...

编程日记 2025/8/28 6:52:51

leetcode111 二叉树的最小深度

相对于 104.二叉树的最大深度 ，本题还也可以使用层序遍历的方式来解决，思路是一样的。最小深度的定义：从根节点到最近叶子节点的最短路径上的节点数量。特别注意： 如果一个子树不存在，就不能用它来计算深度&#x…...

编程日记 2025/8/28 3:30:33

算法设计学习10

实验目的及要求： 本查找实验旨在使学生深入了解不同查找算法的原理、性能特征和适用场景，培养其在实际问题中选择和应用查找算法的能力。通过实验，学生将具体实现多种查找算法，并通过性能测试验证其在不同数据集上的表现&#xff…...

编程日记 2025/8/27 18:30:36

数字统计题解

题目理解题目要求计算所有不大于 N 的非负整数中数字 D 出现的总次数。例如，当 D1 且 N12 时，数字1出现在1、10、11（两次）、12中，共5次。输入输出分析输入格式： 两个正整数 D 和 N，其中1≤…...

编程日记 2025/8/29 0:12:50

eclipse导入工程提示Project has no explicit encoding set

eclipse导入工程提示Project has no explicit encoding set-CSDN博客...

编程日记 2025/8/27 17:46:03

【网络安全论文】筑牢局域网安全防线：策略、技术与实战分析

【网络安全论文】筑牢局域网安全防线：策略、技术与实战分析简述一、引言1.1 研究背景1.2 研究目的与意义1.3 国内外研究现状1.4 研究方法与创新点二、局域网网络安全基础理论2.1 局域网概述2.1.1 局域网的定义与特点2.1.2 局域网的常见拓扑结构2.2 网络安全基本概念2.2.1 网络…...

编程日记 2025/8/29 3:03:02

JVM虚拟机篇（五）：深入理解Java类加载器与类加载机制

深入理解Java类加载器与类加载机制深入理解Java类加载器与类加载机制一、引言二、类加载器2.1 类加载器的定义2.2 类加载器的分类2.2.1 启动类加载器（Bootstrap ClassLoader）2.2.2 扩展类加载器（Extension ClassLoader）2.2.3 应用…...

编程日记 2025/8/29 10:14:48

纯个人整理，蓝桥杯使用的算法模板day4（图论最小生成树问题），手打个人理解注释，超全面，且均已验证成功（附带详细手写“模拟流程图”，全网首个

目录最小生成树Prim代码模拟流程图 kruskal代码代码对应实现案例最小生成树最小生成树：在无向图中求一棵树（n-1条边，无环，连通所有点），而且这棵树的边权和最小 （ps：可能结果不止…...

编程日记 2025/8/28 20:07:44

学习笔记，DbContext context 对象是保存了所有用户对象吗

DbContext 并不会将所有用户对象保存在内存中： DbContext 是 Entity Framework Core (EF Core) 的数据库上下文，它是一个数据库访问的抽象层它实际上是与数据库的一个连接会话，而不是数据的内存缓存当您通过 _context.Users 查询数据时&…...

编程日记 2025/8/18 0:22:10

Kafka 和 Flink的讲解

一、Kafka：分布式消息队列 1. 核心概念角色：Kafka 是一个分布式、高吞吐量的消息队列（Pub-Sub 模型），用于实时传输数据流。关键术语： Producer（生产者&…...

编程日记 2025/8/29 16:29:21

Kafka 高吞吐量的原因是什么？

Kafka 的高吞吐量是它成为“数据中枢”的关键特性之一，这背后是多个技术设计的巧妙配合。下面我给你整理一下 Kafka 高吞吐量的主要原因，通俗又系统。 ✅ 1. 顺序写磁盘（磁盘也能飞） Kafka 的消息写入是追加到日志末尾&#xff…...

编程日记 2025/8/31 10:35:57

基于Python+Flask的服装零售商城APP方案，用到了DeepSeek AI、个性化推荐和AR虚拟试衣功能

首先创建项目结构： fashion_store/ ├── backend/ │ ├── app/ │ │ ├── __init__.py │ │ ├── models/ │ │ ├── routes/ │ │ ├── services/ │ │ └── utils/ │ ├── config.py │ ├── requirements.t…...

编程日记 2025/9/1 1:48:30

26.[MRCTF2020]Transform 1

打开文件是可执行程序.exe，打开看一下，顺便拖入ExeinfoPE 查询一下基本信息。如图。无壳，且是64-bit，打开执行文件也没有什么特别的信息。那就 IDA-x64 分析吧。 🆗，简单的一个加密，我们直接逆…...

编程日记 2025/8/31 12:04:44

LeetCode-98. 验证二叉搜索树

一、题目给定一个二叉树，判断其是否是一个有效的二叉搜索树。假设一个二叉搜索树具有如下特征： 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值； 若它的右子树不空，则右子树上所有结点的值均大于它的…...

编程日记 2025/8/30 0:30:39

【LeetCode Solutions】LeetCode 146 ~ 150 题解

CONTENTS LeetCode 146. LRU 缓存（中等）LeetCode 147. 对链表进行插入排序（中等）LeetCode 148. 排序链表（中等）LeetCode 149. 直线上最多的点数（困难）LeetCode 150. 逆波兰表达式求值…...

编程日记 2025/8/29 7:06:10

leetcode二叉树刷题调试不方便的解决办法

1. 二叉树不易构建在leetcode中刷题时，如果没有会员就需要将代码拷贝到本地的编译器进行调试。但是leetcode中有一类题可谓是毒瘤，那就是二叉树的题。要调试二叉树有关的题需要根据测试用例给出的前序遍历，自己构建一个二叉树，…...

编程日记 2025/8/28 20:26:17

【家政平台开发(16)】消息通知系统设计：搭建高效沟通桥梁

本【家政平台开发】专栏聚焦家政平台从 0 到 1 的全流程打造。从前期需求分析，剖析家政行业现状、挖掘用户需求与梳理功能要点，到系统设计阶段的架构选型、数据库构建，再到开发阶段各模块逐一实现。涵盖移动与 PC 端设计、接口开发及性能优化…...

编程日记 2025/8/28 9:54:12

AI比人脑更强，因为被植入思维模型【44】成长破圈思维

giszz的理解：芒格说，不懂不投。我们一生都在追求破圈，突破本我，突破舒适圈、恐惧圈、学习圈、成长圈、自在圈，可是我们真正能懂的知识有实际真的太少了。这个思维模型给我的启迪，一是要破圈，二是…...

编程日记 2025/8/28 16:31:57

【JavaWeb-Spring boot】学习笔记

目录 <<回到导览Spring boot1. http协议1.1.请求协议1.2.响应协议 2.Tomcat2.1.请求2.1.1.apifox2.1.2.简单参数2.1.3.实体参数2.1.4.数组集合参数2.1.5.日期参数2.1.6.(重点)JSON参数2.1.7.路径参数 2.2.响应2.3.综合练习 3.三层架构3.1.三层拆分3.2.分层解耦3.3.补充 &…...

编程日记 2025/8/24 1:06:12

基于GitLab+Jenkins的持续集成实践指南

架构设计原则分层自动化策略基础层: 代码提交触发自动构建（100%自动化）中间层: 制品生成与验证（自动化+人工审核）发布层: 环境部署（受控手动触发）工具定位矩阵工具核心职责关键优势GitLab源码管理+MR流程精细的权限控制Jenkins流水线编排+任务调度插件生态丰富Nexus制…...

编程日记 2025/8/28 7:38:11

用HTML.CSS.JavaScript实现一个贪吃蛇小游戏

目录一、引言二、实现思路1. HTML 结构2. CSS 样式3. JavaScript 逻辑三、代码实现四、效果展示一、引言贪吃蛇是一款经典的小游戏，曾经风靡一时。今天，我们将使用 HTML、CSS 和 JavaScript 来实现一个简单的贪吃蛇小游戏。通过这个项目&#xff0c…...

编程日记 2025/8/26 6:11:36

医疗思维图与数智云融合：从私有云到思维图的AI架构迭代（代码版）

医疗思维图作为AI架构演进的重要方向，其发展路径从传统云计算向融合时空智能、大模型及生态开放的“思维图”架构迭代，体现了技术与场景深度融合的趋势。以下是其架构迭代的核心路径与关键特征分析：一、从“智慧云”到“思维图”的架构演进逻辑以下是针对医疗信息化领域…...

编程日记 2025/8/27 13:04:15

Kafka 中，为什么同一个分区只能由消费者组中的一个消费者消费？

在 Kafka 中，同一个分区只能由消费者组中的一个消费者消费，这是 Kafka 的设计决策之一，目的是保证消息的顺序性和避免重复消费。这背后有几个关键的原因： 1. 保证消息顺序性 Kafka 中的每个分区（Partition&#xff…...

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

Kafka 中的批次

在 Kafka 中，批次（Batch） 是生产者发送消息的一个重要概念。它对 Kafka 的性能、吞吐量、延迟等有很大影响。批量处理可以使消息发送更高效，减少网络往返和磁盘写入的开销。下面我将详细解释 Kafka 中的批次机制，包括…...

编程日记 2025/8/31 4:08:41

《UNIX网络编程卷1：套接字联网API》第7章：套接字选项深度解析

《UNIX网络编程卷1：套接字联网API》第7章：套接字选项深度解析一、套接字选项核心原理 1.1 选项层级体系套接字选项按协议层级划分（图1）： SOL_SOCKET：通用套接字层选项IPPROTO_IP：IPv4协议层…...

编程日记 2025/8/28 9:37:15

使用 pytest-xdist 进行高效并行自化测试

pytest-xdist 是 pytest 的一个扩展插件，主要用于实现测试用例的并行执行和分布式测试。通过利用多进程或者多机分布式的方式，pytest-xdist 能够显著缩短测试执行时间，提升持续集成（CI）流程的效率。在自动化测试中&a…...

编程日记 2025/8/29 11:50:12

谈谈策略模式，策略模式的适用场景是什么？

一、什么是策略模式？ 策略模式（Strategy Pattern）属于行为型设计模式。核心思路是将一组可替换的算法封装在独立的类中，使它们可以在运行时动态切换，同时使客户端代码与具体算法解耦。它包含三个…...

编程日记 2025/8/31 16:34:20

网络安全防御核心原则与实践指南

一、四大核心防御原则 A. 纵深防御原则（Defense in Depth） 定义：通过在多个层次（如网络、系统、应用、数据）设置互补的安全措施，形成多层次防护体系。目的：防止单一漏洞导致整体安全失效&…...

编程日记 2025/9/2 1:12:40

动态规划2——斐波那契数列模型——三步问题

1.题目三步问题。有个小孩正在上楼梯，楼梯有 n 阶台阶，小孩一次可以上 1 阶、2 阶或 3 阶。实现一种方法，计算小孩有多少种上楼梯的方式。结果可能很大，你需要对结果模 1000000007。示例 1： 输入：n 3 …...

编程日记 2025/8/30 11:06:40

周末总结(2024/04/05)

工作人际关系核心实践： 要学会随时回应别人的善意，执行时间控制在5分钟以内坚持每天早会打招呼遇到接不住的话题时拉低自己，抬高别人(无阴阳气息) 朋友圈点赞控制在5min以内，职场社交不要放在5min以外职场的人际关系在面对利…...

编程日记 2025/8/29 15:20:11

常见的图像生成算法

综合技术原理、优化方向和应用场景，结合经典模型与前沿进展进行分述： 一、经典生成模型 1. 生成对抗网络（GAN） 原理：由生成器（Generator）和判别器（Discriminator）通过…...

编程日记 2025/8/28 4:59:12

PE结构（十五）系统调用与函数地址动态寻找

双机调试当需要分析一个程序时，这个程序一定是可以调试的，操作系统也不例外。在调试过程中下断点是很重要的当我们对一个应用程序下断点时，应用程序是挂起的。但当我们对操作系统的内核程序下断点时，被挂起的不是内核程序而是…...

编程日记 2025/9/1 8:20:12

verilog状态机思想编程流水灯

目录一、状态机1. 状态机基本概念2. 状态机类型3. Verilog 状态机设计要点二、状态机实现一个1s流水灯三、DE2-115实物演示一、状态机 1. 状态机基本概念状态机（Finite State Machine, FSM）是数字电路设计中用于描述系统状态转换的核心组件&#x…...

编程日记 2025/8/29 7:41:32

Java实现N皇后问题的双路径探索：递归回溯与迭代回溯算法详解

N皇后问题要求在NN的棋盘上放置N个皇后，使得她们无法互相攻击。本文提供递归和循环迭代两种解法，并通过图示解释核心逻辑。一、算法核心思想使用回溯法逐行放置皇后，通过冲突检测保证每行、每列、对角线上只有一个皇后。发现无效路径时回退…...

编程日记 2025/8/27 11:24:37

#SVA语法滴水穿石# （000）断言基本概念和背景

一、前言随着数字电路规模越来越大、设计越来越复杂，使得对设计的功能验证越来越重要。首先，我们要明白为什么要对设计进行验证？验证有什么作用？例如，在用FPGA进行设计时，我们并不能确保设计出来的东西没有功能上的漏洞，因此在设计后我们都会对其进行验证仿真。换句话说…...

编程日记 2025/8/30 4:05:50

【Android Studio 下载 Gradle 失败】

路虽远行则将至，事虽难做则必成一、事故现场下载Gradle下载不下来，没有Gradle就无法把项目编译为Android应用。二、问题分析观察发现下载时长三分钟，进度条半天没动，说明这个是国外的东西，被墙住了，需…...

编程日记 2025/8/29 6:19:45

贪心算法之Huffman编码

1. 算法推理 Huffman 编码的目标是为给定字符构造一种前缀码，使得整体编码长度最短。基本思想是： 贪心选择：每次选择频率最小的两个节点合并。合并后的节点的权值为两个子节点权值之和，代表这部分子树出现的总频率。局部最优导…...

编程日记 2025/8/20 17:59:28

Flask学习笔记 - 表单

表单处理基本表单处理：使用 request.form 获取表单数据。使用 Flask-WTF：结合 WTForms 进行表单处理和验证，简化表单操作。表单验证：使用验证器确保表单数据的有效性。文件上传：处理文件上传和保存文件。CSRF 保护&a…...

编程日记 2025/8/31 0:26:05