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

Vue框架的响应式系统

news 来源：原创 2025/8/22 20:50:21

以下是关于 响应式系统 的系统梳理：

一、响应式系统的核心目标
  1. 数据驱动视图：自动追踪数据变化并触发视图更新
  2. 高效依赖追踪：精确识别数据与视图的依赖关系
  3. 批量异步更新：优化多次数据变更的更新性能
  4. 组件级更新：最小化DOM操作范围
二、核心架构演进
版本核心技术优势局限性
Vue 2Object.defineProperty浏览器兼容性好（支持到IE9）无法检测对象属性添加/删除
Vue 3Proxy + Reflect原生支持数组/对象全量操作需要ES6+环境
三、Vue 2 响应式实现

  1. 对象劫持原理

    function defineReactive(obj, key, val) {const dep = new Dep()Object.defineProperty(obj, key, {get() {dep.depend()  // 收集依赖return val},set(newVal) {if (newVal === val) returnval = newValdep.notify()  // 触发更新}})
}

  2. 数组方法重写

    const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
;['push', 'pop', 'shift', 'unshift'].forEach(method => {const original = arrayProto[method]def(arrayMethods, method, function mutator(...args) {const result = original.apply(this, args)this.__ob__.dep.notify()  // 触发更新return result})
})

  3. 依赖收集系统

    class Dep {static target = null  // 当前正在计算的Watchersubs = []            // 订阅者列表depend() {if (Dep.target) {Dep.target.addDep(this)}}notify() {const subs = this.subs.slice()for (let i = 0; i < subs.length; i++) {subs[i].update()}}
}
四、Vue 3 响应式升级

  1. Proxy 基础实现

    function reactive(obj) {return new Proxy(obj, {get(target, key, receiver) {track(target, key)  // 依赖收集return Reflect

相关文章：

Vue框架的响应式系统

以下是关于 响应式系统 的系统梳理： 一、响应式系统的核心目标 数据驱动视图：自动追踪数据变化并触发视图更新高效依赖追踪：精确识别数据与视图的依赖关系批量异步更新：优化多次数据变更的更新性能组件级更新：最小化DOM操作范围二、核心架构演进 版本核心技术优势局限性Vu…...

编程日记 2025/8/22 20:50:21

【Shell】模拟爬虫下载天龙八部小说

Shell脚本&#xff1a; #curl https://tianlong.5000yan.com/ -o tianlong.html grep "href" tianlong.html | grep html | awk -F"\"" { print $6 } >> urls.txt grep "href" tianlong.html | grep html | awk -F">"…...

编程日记 2025/8/23 1:35:12

WHAT - JavaScript 中 Object.defineProperty() 和 Proxy 对比

目录 一、Object.defineProperty()作用基本语法示例&#xff1a;定义一个只读属性示例&#xff1a;定义 getter/setter 二、Proxy作用基本语法示例&#xff1a;拦截属性访问 对比&#xff1a;defineProperty vs Proxy场景选择建议 在 JavaScript 中&#xff0c;Object.definePr…...

编程日记 2025/8/17 22:10:16

Qt进阶开发：模型/视图原理详解

文章目录 一、模型/视图架构概述二、模型/视图架构的组成部分2.1 模型2.2 视图2.3 委托三、模型类的介绍3.1 模型索引3.2 行和列3.3 父项4.项角色四、视图类的介绍4.1 基本概念4.2 处理项目选择五、委托类的介绍5.1 基本概念5.2 自定义委托六、数据-窗口映射器一、模型/视图架构…...

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

d202547

目录 一、sql-每月交易 I 二、 sql-按日期分组销售产品 三、sql-列出指定时间段内所有的下单产品 四、 第k个大的数 一、sql-每月交易 I 题目意思就是把国家名称&#xff0c;和年月一样的分为一组&#xff0c;在这组数据中进行计数 题目给的日期格式是yyyy-mm-ss,可以使用l…...

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

pulsar使用指南

Apache Pulsar 是 Apache 软件基金会顶级项目&#xff0c;是下一代云原生分布式消息流平台&#xff0c;集消息、存储、轻量化函数式计算为一体&#xff0c;采用计算与存储分离架构设计&#xff0c;支持多租户、持久化存储、多机房跨区域数据复制&#xff0c;具有强一致性、高吞…...

编程日记 2025/8/20 19:46:08

底盘---麦克纳姆轮(Mecanum Wheel)

一、基本定义与起源 定义&#xff1a;麦克纳姆轮是一种实现全向移动的特殊轮式结构&#xff0c;通过在主轮周边安装多个倾斜的辊子&#xff08;小轮&#xff09;&#xff0c;使设备能够在平面上向任意方向移动&#xff08;包括横向、斜向、旋转等&#xff09;&#xff0c;无需…...

编程日记 2025/8/20 5:19:29

内网文件传输新体验，聊天、传输、自定义，一应俱全

Flix 是一款高效、便捷的跨平台局域网文件传输工具&#xff0c;支持 Windows、macOS、Android、iOS 和 Linux 等多种操作系统。它以简洁直观的聊天式界面为特色&#xff0c;让用户能够像发送消息一样轻松地传输文件&#xff0c;无需复杂的设置或登录。Flix 支持大文件和多种格式…...

编程日记 2025/8/21 6:40:37

深入解析嵌入式Linux系统架构：从Bootloader到用户空间

B站视频链接,请多多关注本人B站&#xff1a; &#x1f4cc; Yocto项目实战教程&#xff1a;第二章 视频讲解 目录 第2章 Linux系统架构 2.1 GNU/Linux2.2 Bootloader2.3 内核空间2.4 用户空间 总结 第2章 Linux系统架构 {#linux系统架构} 嵌入式Linux系统是Linux内核的精简版…...

编程日记 2025/8/22 13:04:19

一句话，十分钟，一部片！

大家好&#xff01;我是羊仔&#xff0c;专注AI工具、智能体、编程。 羊仔最近发现一个超有意思的AI工具&#xff0c;简直是为内容创作者量身打造的&#xff01;啥工具&#xff1f;Story-Flicks&#xff01; 这玩意儿能干啥呢&#xff1f;简单来说&#xff0c;一句话&#xf…...

编程日记 2025/8/20 17:58:12

【橘子大模型】使用streamlit来构建自己的聊天机器人(下)

一、简介 我们之前完成了一个简易的聊天机器人&#xff0c;但是还留下了一些问题没有解决&#xff0c;比如如何开启新的会话。如何切换session_id&#xff0c;如何把对话做成流式的输出。这些我们就会在今天来完成。 二、关于新的会话和session_id from dotenv import load_…...

编程日记 2025/8/19 1:42:38

【合新通信】光纤延迟线（ODL)的原理

光纤延迟线是一种利用光学原理实现信号传输的设备&#xff0c;主要用于雷达、通信和测量等领域。以下是光纤延迟线的基本原理和工作方式&#xff1a; 技术原理 光纤延迟线通过相位控制器和分束器来处理输入信号。具体来说&#xff0c;数据信号和参考信号同时输入分束器&#x…...

编程日记 2025/8/22 14:18:55

Altium Designer——规则设置

规则 间距规则&#xff1a; 线宽&#xff1a;6mil > x > 4mil 1.在菜单栏中选择 设计 ——》 规则 根据下图双击对应的Clearance规则&#xff0c;更改红圈中的数字为6mil&#xff0c;然后点击应用再点击确定。 这个间距是元素之间&#xff08;走线、铺铜、元器件&#x…...

编程日记 2025/8/21 17:29:04

智谛达科技：以创新为翼，翱翔AI人形机器人蓝海

在科技创新的浩瀚星空中,智谛达科技集团犹如一颗璀璨的明星,以其独特的创新光芒,照亮了AI人形机器人的广阔蓝海。这家在AI领域深耕多年的企业,始终秉持着创新为翼的发展理念,不断突破技术瓶颈,拓展应用场景,以卓越的实力和前瞻性的思维,引领着人形机器人行业的未来发展。 智谛达…...

编程日记 2025/8/18 0:53:00

前后端接口参数详解与 Mock 配置指南【大模型总结】

前后端接口参数详解与 Mock 配置指南 一、前端请求参数类型及 Mock 处理 1.1 URL 路径参数 (Path Parameters) 场景示例&#xff1a; GET /api/users/{userId}/orders/{orderId}Mock.js 处理&#xff1a; Mock.mock(/\/api\/users\/(\d)\/orders\/(\d)/, get, (options) &g…...

编程日记 2025/8/22 15:54:38

RPC与其他通信技术的区别，以及RPC的底层原理

1、什么是 RPC&#xff1f; 远程过程调用&#xff08;RPC&#xff09; 是一种协议&#xff0c;它允许程序在不同计算机之间进行通信&#xff0c;让开发者可以像调用本地函数一样发起远程请求。 通过 RPC&#xff0c;开发者无需关注底层网络细节&#xff0c;能够更专注于业务逻…...

编程日记 2025/8/21 10:55:51

汽车售后ODX 和 OTX 详细分析

在汽车售后诊断领域&#xff0c;ODX 和 OTX 都是重要的标准&#xff0c;但它们的应用场景和特点有所不同&#xff0c;难以简单地评判哪个是绝对的主流。以下是对它们的详细分析。 ODX&#xff08;Open Diagnostic data eXchange&#xff09; 概述&#xff1a;ODX 是由 ASAM 制…...

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

深度学习天崩开局

李沐大神的d2l包导入&#xff0c; 这玩意需要python311版本&#xff0c;我现在版本已经313了&#xff0c;作为一个天生要强的男人&#xff0c;我是坚决不向低版本低头的。 然后我就研究啊&#xff0c;各种翻资料啊&#xff0c;然后deepseek加豆包都翻烂了&#xff0c; 最终所…...

编程日记 2025/8/21 11:26:15

面试算法高频04-分治与回溯

分治与回溯 分治和回溯算法&#xff0c;包括其概念、特性、代码模板&#xff0c;并结合具体题目进行讲解&#xff0c;旨在帮助学员理解和掌握这两种算法的应用。 分治与回溯的概念 分治&#xff08;Divide & Conquer&#xff09;&#xff1a;本质上基于递归&#xff0c;先…...

编程日记 2025/8/22 17:17:21

整数编码 - 华为OD统一考试(A卷、C++)

题目描述 实现一种整数编码方法&#xff0c;使得待编码的数字越小&#xff0c;编码后所占用的字节数越小。 编码规则如下: 编码时7位一组&#xff0c;每个字节的低7位用于存储待编码数字的补码。字节的最高位表示后续是否还有字节&#xff0c;置1表示后面还有更多的字节&…...

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

对访问者模式的理解

对访问者模式的理解 一、场景二、不采用访问者模式1、代码2、特点 三、采用访问者模式1、代码2、特点 四、思考 一、场景 我们有一个图形系统&#xff0c;系统中有多种图形对象&#xff08;如圆形、方形等&#xff09;&#xff0c;每种图形对象都有不同的属性和行为。现在需要对…...

编程日记 2025/8/22 1:07:23

第三次PID状态机

以下是 apply_params 函数的实现步骤和代码示例&#xff1a; 1. 定义参数结构体 在头文件中定义 PID_Params 结构体&#xff0c;包含需要动态调整的 PID 参数&#xff1a; // ms_hal_photo_sensor.h typedef struct {float Kp; // 比例系数float Ki; // …...

编程日记 2025/8/17 9:22:06

如何在大型项目中有效使用TypeScript进行类型定义？

嗨&#xff0c;大家好&#xff0c;我是莫循&#xff0c;Typescript是JavaScript的超集&#xff0c;现在已经广泛用于前端开发&#xff0c;那么在项目中如何用好类型定义呢&#xff1f;以下是一些可以提供参考的案例实践。 一、类型组织策略 1. 模块化类型定义 按功能/模块划分…...

编程日记 2025/8/17 22:11:19

C4D XP 粒子动画云端渲染指南

在 C4D 动画制作领域&#xff0c;XP 粒子特效因其复杂的动力学计算常成为渲染瓶颈。传统本地渲染不仅耗时漫长&#xff0c;还需持续占用高配置硬件。而借助专业云渲染平台&#xff0c;创作者可突破物理限制&#xff0c;高效完成 XP 粒子动画的最终输出。 以渲染 101 平台为例&a…...

编程日记 2025/8/21 10:36:49

mysql知识总结 基础篇

Mysql知识总结 1. 执行一条sql语句 期间发生了什么&#xff1f;1. 如何查看mysql服务被多少个客户端链接了2. 空闲链接会一直闲置嘛&#xff1f;3. mysql的链接数量有限制嘛&#xff1f;4. 我们如何知道mysql要使用哪个索引5. 什么是覆盖索引 2. MySQL 一行记录是怎么存储的&am…...

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

基于条码数据生成校验密码的C++实现方案

前言 在医疗试剂、工业产品等需要严格追踪管理的领域&#xff0c;条码系统常被用于标识产品信息。本文将详细介绍4种用C实现的条码密码生成算法&#xff0c;这些算法可以根据条码前11位数据生成2位校验密码&#xff08;第9、10位&#xff09;&#xff0c;用于数据校验或简单防…...

编程日记 2025/8/17 23:25:28

前端工具方法整理

文章目录 1.在数组中找到匹配项&#xff0c;然后创建新对象2.对象转JSON字符串3.JSON字符串转JSON对象4.有个响应式对象&#xff0c;然后想清空所有属性5.判断参数不为空6.格式化字符串7.解析数组内容用逗号拼接 1.在数组中找到匹配项&#xff0c;然后创建新对象 const modifi…...

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

[数据结构]图krusakl算法实现

目录 Kruskal算法 Kruskal算法 我们要在连通图中去找生成树 连通图&#xff1a;在无向图中&#xff0c;若从顶点v1到顶点v2有路径&#xff0c;则称顶点v1与顶点v2是连通的。如果图中任意一对顶点都是连通的&#xff0c;则称此图为连通图。 生成树&#xff1a;一个连通图的最小…...

编程日记 2025/8/20 10:31:06

18-产品经理-跟踪进度

禅道是一个可以帮助产品经理跟踪研发进度的系统。通过禅道&#xff0c;产品经理可以从多个角度了解产品的研发状态。在仪表盘中&#xff0c;可以展示所有产品或单一产品的概况&#xff0c;包括需求、计划和发布数量&#xff0c;研发需求状态&#xff0c;Bug修复率和计划发布数。…...

编程日记 2025/8/17 22:11:44

华为机试—挑7

题目 你需要统计 1 到 n 之间与 7 有关的数字的个数。 与 7 有关的数字包括&#xff1a; 是 7 的倍数&#xff08;如 7,14,21 等&#xff09;&#xff1b;包含数字 7&#xff08;如 17,27,37,⋯ ,70,71,72,⋯等&#xff09;。 示例 输入&#xff1a;20 输出&#xff1a;3 说…...

编程日记 2025/8/17 23:11:04

【区块链安全 | 第三十四篇】合约审计之重入漏洞

文章目录 概念漏洞代码代码审计攻击代码攻击过程总结示例修复建议审计思路 概念 以太坊的智能合约可以互相调用&#xff0c;也就是说&#xff0c;一个合约可以调用另一个合约的函数。除了外部账户&#xff0c;合约本身也可以持有以太币并进行转账。当合约接收到以太币时&#…...

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

Java虚拟机——JVM(Java Virtual Machine)解析一

1.JVM是什么&#xff1f; 1.1 JVM概念 Java Virtual Machine (JVM) 是JDK的核心组件之一&#xff0c;它使得 Java 程序能够在任何支持 JVM 的设备或操作系统上运行&#xff0c;而无需修改源代码 JDK是什么&#xff0c;JDK和JVM是什么关系&#xff1f;1.Java IDE(Integrated …...

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

【JVM】question

问题 JVM线程是用户态还是内核态 java线程在jdk1.2之前&#xff0c;是基于名为“绿色线程”的用户线程实现的&#xff0c;这导致绿色线程只能同主线程共享CPU分片&#xff0c;从而无法利用多核CPU的优势。 由于绿色线程和原生线程比起来在使用时有一些限制&#xff0c; jdk1.2…...

编程日记 2025/8/20 5:19:39

页面编辑器CodeMirror初始化不显示行号或文本内容

延迟刷新 本来想延迟100毫秒的&#xff0c;但是会出现样式向左偏移的情况&#xff0c;于是试了试500毫秒&#xff0c;发现就没有问题了&#xff0c;可能是样式什么是需要一个加载过程吧。 useEffect(() > {editorRef.current?.setValue(value || );setTimeout(() > {edi…...

编程日记 2025/8/22 5:11:49

顺序表——C语言实现

目录 一、线性表 二、顺序表 1.实现动态顺序表 SeqList.h SeqList.c Test.c 问题 经验&#xff1a;free 出问题&#xff0c;2种可能性 解决问题 &#xff08;2&#xff09;尾删 &#xff08;3&#xff09;头插&#xff0c;头删 &#xff08;4&#xff09;在 pos 位…...

编程日记 2025/8/19 2:05:34

OpenCV 图形API（21）逐像素操作

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在OpenCV的G-API模块中&#xff0c;逐像素操作指的是对图像中的每个像素单独进行处理的操作。这些操作可以通过G-API的计算图&#xff08;Graph …...

编程日记 2025/8/18 0:33:31

车载联网终端4G汽车TBOX介绍定义与概述

汽车 TBOX&#xff08;Telematics Box&#xff09;是专为汽车设计的远程通信终端设备&#xff0c;属于车联网系统的关键组成部分。车联网系统一般包含主机、汽车 T - BOX、手机 APP 及后台系统。融合了车身网络和 4G 无线通信技术&#xff0c;为汽车提供丰富的 Telematics 服务…...

编程日记 2025/8/19 4:15:42

CentOS无法安装Vim文本编辑器问题以及解决方法

1.问题一&#xff1a;用户权限不够 解决方法一&#xff1a;切换到root用户 解决方法二&#xff1a;给本用户添加权限 2.问题二&#xff1a;镜像源问题&#xff1a;官方镜像源可能已经失效 解决方法&#xff1a; 1. 检查网络连接 2. 检查和配置 DNS 3. 更换镜像源&#…...

编程日记 2025/8/20 16:20:30

Kettle如何与应用集成

Kettle&#xff08;Pentaho Data Integration&#xff0c;PDI&#xff09;可以通过多种方式与应用程序集成&#xff0c;以下是7种主流方法及具体实现示例&#xff1a; 一、命令行调用&#xff08;最基础&#xff09; # 执行转换&#xff08;Transformation&#xff09; ./pan.…...

编程日记 2025/8/21 8:59:06

Pytorch torch.nn.utils.rnn.pad_sequence 介绍

torch.nn.utils.rnn.pad_sequence 是 PyTorch 中一个用于填充序列的实用函数&#xff0c;它主要用于处理长度不一的序列数据&#xff0c;将这些序列填充到相同的长度&#xff0c;以便能将它们组合成一个批量&#xff08;batch&#xff09;输入到神经网络中。以下是详细介绍&…...

编程日记 2025/8/17 7:16:49

4.7正则表达式

1.字符匹配 一般字符匹配自身. 匹配任意字符(换行符\n除外),一个点占一位\转义字符&#xff0c;使其后一个字符改变原来的意思(\.就是.)[......]字符集,对应的位置可以是字符集中的任意字符.字符集中的字符可以逐个列出,也可以给出范围如[abc]或[a-c] [^abc] 表示取反&#xf…...

编程日记 2025/8/22 8:00:08

CogPatInspectTool工具

CogPatInspectTool是康耐视中的一种模板比对的视觉检测工具&#xff0c;主要用于产品不良检测。其核心功能是通过将输入图像与预先训练好的模板进行对比&#xff0c;识别出两者之间的差异&#xff0c;并生成高亮差异图&#xff0c;从而判断产品是否存在缺陷。 效果图 CogPatIn…...

编程日记 2025/8/17 22:11:00

牛客周赛 + 洛谷刷题

秘藏 #include<bits/stdc.h> using namespace std; typedef long long ll; const int N 200010; ll a[N], b[N]; int n, k; ll dp[2][N];//dp[i][j]是在i界中取了j之前的最大值 int main(){ios::sync_with_stdio(false), cin.tie(0), cout.tie(0);cin >> n >&…...

编程日记 2025/8/21 23:13:53

【数据结构】图论存储革新：十字链表双链设计高效解决有向图入度查询难题

十字链表 导读一、邻接表的优缺点二、十字链表2.1 结点结构2.2 原理解释2.2.1 顶点表2.2.2 边结点2.2.3 十字链表 三、存储结构四、算法评价4.1 时间复杂度4.2 空间复杂度 五、优势与劣势5.1 优势5.2 劣势5.3 特点 结语 导读 大家好&#xff0c;很高兴又和大家见面啦&#xff…...

编程日记 2025/8/20 18:57:47

【JavaScript】十五、事件对象与环境对象

文章目录 1、事件对象1.1 获取事件对象1.2 常用属性1.3 案例&#xff1a;回车发布评论 2、环境对象this3、回调函数4、案例&#xff1a;tab切换5、案例&#xff1a;全选文本框&#x1f4d6; 1、事件对象 事件对象&#xff1a; 也是个对象&#xff0c;object&#xff0c;里面存…...

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

OJ--第N个泰波那契数列

1137. 第 N 个泰波那契数 - 力扣&#xff08;LeetCode&#xff09; 1 题干部分 2 拆解 1 状态表示&#xff1a;dp[i] 2 状态转移方程:dp[i]dp[i-1]dp[i-2]dp[i-3] 3 初始化:让dp[0]0,dp[1]dp[2]1 4 填表顺序:从dp[3]开始填从左往右填 5 返回值&#xff1a;dp[n]即为返回的…...

编程日记 2025/8/22 2:05:38

Python从入门到高手8.1节-元组类型详解

目录 8.1.1 理解元组类型 8.1.2 元组的类型名 8.1.3 元组的定义 8.1.4 元组的解包 8.1.5 元组是可迭代的 8.1.6 假期就这么结束了 8.1.1 理解元组类型 元组与列表有着相同的数据结构&#xff0c;区别在于&#xff0c;元组是不可变的数据类型&#xff0c;而列表是可变的数…...

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

使用 Qt 和 OBS 工具检测系统硬件编码器支持情况（NVENC、QSV、AMF）

在开发涉及视频处理的软件时，判断系统是否支持硬件加速编码器（如 NVIDIA NVENC、Intel QSV、AMD AMF）对于性能优化至关重要。本文将介绍如何结合 Qt 与 OBS Studio 附带的小工具程序，实现一个完整、异步且不会卡住 UI 的硬件加速检测模块。 一、背景与目标 硬件加速编码器…...

编程日记 2025/8/21 5:33:20

Python爬虫生成CSV文件的完整流程

引言 在当今数据驱动的时代&#xff0c;网络爬虫已成为获取互联网数据的重要工具。Python凭借其丰富的库生态系统和简洁的语法&#xff0c;成为了爬虫开发的首选语言。本文将详细介绍使用Python爬虫从网页抓取数据并生成CSV文件的完整流程&#xff0c;包括环境准备、网页请求、…...

编程日记 2025/8/21 20:25:41

图论：多源最短路

多源最短路 B3647 【模板】Floyd - 洛谷 #include<iostream> #include<cstring> using namespace std;const int N 110; int f[N][N]; int n, m;int main() {memset(f, 0x3f, sizeof(f));//对于重边的处理取较小值&#xff0c;所以要把全部都初始化成无穷大&…...

编程日记 2025/8/19 7:56:55