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

《Vue进阶教程》第二十七课：实现侦听对象

news 来源：原创 2025/5/17 15:27:47

往期内容：

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

《Vue进阶教程》第十七课：支持分支切换

《Vue进阶教程》第十八课：避免死循环

《Vue进阶教程》第十九课：computed初步实现

《Vue进阶教程》第二十课：lazy懒执行

《Vue进阶教程》第二十一课：支持缓存

《Vue进阶教程》第二十二课：自定义更新(调度器)

《Vue进阶教程》第二十三课：渲染计算属性的结果

《Vue进阶教程》第二十四课：优化

《Vue进阶教程》第二十五课：watch基本概念

《Vue进阶教程》第二十六课：实现侦听函数

1) 基本实现

如果第一个参数不是副作用函数, 可以将其包装成一个副作用函数

function watch(source, cb) {let getterif (typeof source === 'function') {getter = source} else {getter = () => source}effect(getter, {scheduler() {cb()},})
}

由于并没有触发代理对象的取值操作, 因此不会收集依赖

考虑实现一个函数, 遍历访问source中的每一个属性

function traverse(value) {for (const k in value) {// 将代理对象的每个属性访问一次value[k]}
}
function watch(source, cb) {let getterif (typeof source == 'function') {getter = source} else {getter = () => traverse(source)}effect(getter, {scheduler() {cb()},})
}

2) 支持嵌套

如果代理对象中存在嵌套情况

在reactive中要递归为嵌套的对象创建代理
在traverse中要递归访问嵌套的属性

示例

get(target, key) {if (key == '__v_isReactive') return true // 新增// console.log(`自定义访问${key}`)// 收集依赖track(target, key)if (typeof target[key] == 'object') {// 递归处理对象类型return reactive(target[key])}return target[key]
},

function traverse(value) {for (const k in value) {if (typeof value[k] == 'object') {traverse(value[k])} else {// 将代理对象的每个属性访问一次value[k]}}
}

3) 解决循环引用问题

如果按上述写法, 会出现递归循环引用, 陷入死循环

什么是循环引用

如果一个对象的某个属性引用自身, 在递归时会死循环

问题示例

const state = reactive({ name: 'xiaoming', address: { city: '武汉' } })
state.test = state// watch接收响应式对象的情况
watch(state, () => {console.log('该函数默认不执行, 只有状态更新时执行...')
})setTimeout(() => {// 侦听对象时, 是深度侦听state.address.city = '北京'
}, 1000)

以上问题可以简化为

const obj = {foo: 'foo',
}
// obj的一个属性引用obj本身, 出现循环引用问题
obj.bar = objfunction traverse(value) {for (const k in value) {if (typeof value[k] == 'object') {traverse(value[k])} else {// 将代理对象的每个属性访问一次value[k]}}
}traverse(obj)

为了避免递归循环引用陷入死循环, 改造traverse方法

function traverse(value, seen = new Set()) {// 如果这个对象已经被遍历过了, 直接返回if (typeof value !== 'object' || seen.has(value)) return// 将遍历的对象记录下来, 再递归时判断seen.add(value)for (let key in value) {// 这里取值, 会触发proxy对象的getter操作traverse(value[key], seen)}
}

《Vue进阶教程》第二十七课：实现侦听对象

往期内容： 《Vue进阶教程》第十六课：深入完善响应式系统之单例模式《Vue进阶教程》第十七课：支持分支切换《Vue进阶教程》第十八课：避免死循环《Vue进阶教程》第十九课：computed初步实现《Vue进阶教程》第二十…...

编程日记 2025/5/17 15:27:47

【Linux 网络 (五)】Tcp/Udp协议

Linux 网络一前言二、Udp协议1）、Udp协议特点2）、Udp协议格式3）、Udp报文封装和解包过程4）、UDP的缓冲区三、TCP协议1）、TCP协议特点2）、TCP协议格式1、4位首部长度、源端口、目的端口2、16位窗口大小3、…...

编程日记 2025/5/17 15:20:09

算法工程化工程师

算法工程化工程师是一种结合算法研究与工程开发能力的技术职位，主要职责是将算法从理论研究到实际落地，应用到各种工业或商业场景中。以下是关于这个职位的一些核心内容： 核心职责： 算法实现与优化： 将数学模型或算法…...

编程日记 2025/5/17 14:58:33

信息系统管理师试题-转型升级

1.3.转型升级战略转型升级是对组织的长期发展方向、运行模式、组织战略、组织方式、资源配置方式、祖师文化等进行全方位升级变革。下列对战略转型升级的描述错误的是（） A大多数组织的转型主要是战略转型 B组织转型升级首先要解决的是战略选择问题 C组织…...

编程日记 2025/5/8 18:14:50

mysql三种读取模式（普通、流式、游标）

在与MySQL数据库交互时，数据的读取方式有多种选择，包括流式读取、游标读取和普通读取。每种方式都有其独特的原理、优势和劣势。本文将对这三种读取方式进行详细介绍， 1. 普通读取介绍普通读取是指通过JDBC的Statement或PreparedStateme…...

编程日记 2025/5/15 20:29:22

月子会所ERP管理云平台 GetData.ashx SQL注入致RCE漏洞复现

0x01 产品简介月子会所ERP管理云平台是武汉金同方科技有限公司专为为母婴服务行业提供信息化解决方案，是结合行业顶级月子中心相关企业需求开发的一套综合性管理软件。该系统全面管控月子中心经营过程中的各个环节,提高总店及分店月子中心管理水平,规范月子中心从业人员操作…...

编程日记 2025/5/17 12:23:36

Ubuntu22.10/22.04 autoinstall--OK

第一步：建立ubuntu22.04 jammy apt本地源（见本博主对应栏） --------------------------------------------------------------------------------------- ubuntu22.04 grub配置： menuentry Ubuntu22.04-autoinstall(UEFI) --id UBUNTU22.04-autoinstall { echo "…...

编程日记 2025/5/16 5:59:39

操作系统之同步与互斥的基本概念

1. 同步的基本概念定义：同步是指在多个并发执行的进程或线程之间协调其行为，以使它们能够正确地相互合作。在计算机科学中，同步通常指对共享资源进行访问控制，以避免竞争条件和死锁等问题。实现方式：为了实现同步&a…...

编程日记 2025/5/17 1:33:29

【ANGULAR网站开发】初始环境搭建

1. 初始化angular项目 1.1 创建angular项目需要安装npm和nodejs，这边不在重新安装直接安装最新版本的angular npm install -g angular/cli安装指定大版本的angular npm install -g angular/cli181.2 启动angular 使用idea启动控制台启动 ng serve启动成功…...

编程日记 2025/5/16 14:40:15

[青少年CTF练习平台]Lihua‘s for

下载附件之后直接IDA启动查看dword_403040指向的内容，全是数据，提取出来分析完成写脚本 flag "" temdata [0x00000066, 0x0000006D, 0x00000063, 0x00000064, 0x0000007F, 0x00000064, 0x00000032, 0x00000036, 0x0000006A, 0x000000…...

编程日记 2025/5/16 10:38:57

WebRTC服务质量（12）- Pacer机制（04) 向Pacer中插入数据

WebRTC服务质量（01）- Qos概述 WebRTC服务质量（02）- RTP协议 WebRTC服务质量（03）- RTCP协议 WebRTC服务质量（04）- 重传机制（01) RTX NACK概述 WebRTC服务质量（…...

编程日记 2025/5/17 14:14:41

css文字折行以及双端对齐实现方式

使用flex布局后，文字超出容器部分不会自动折行了。实现代码如下： <el-row><el-col :span"24"><span class"label">姓名</span><span class"content">{{name}}</span></el-col>…...

编程日记 2025/5/17 14:13:57

AI智能养站神器-SEO助理原创文章批量生成发布工具

很多站长最头疼的就是网站每天的内容更新，因为不知道写什么，采集被人的文章又会被定义为抄袭，而且现在伪原创已经没有多大的效果了，所以今天给大家分享的就是一款AI智能养战神器-SEO助理原创文章批量生成发布工具。这款工具支持…...

编程日记 2025/5/13 13:41:16

python数据分析之爬虫基础：selenium详细讲解

目录 1、selenium介绍 2、selenium的作用： 3、配置浏览器驱动环境及selenium安装 4、selenium基本语法 4.1、selenium元素的定位 4.2、selenium元素的信息 4.3、selenium元素的交互 5、Phantomjs介绍 6、chrome handless模式 1、selenium介绍 （1…...

编程日记 2025/5/16 21:24:37

使用 ECharts 与 Vue 构建数据可视化组件

在前端开发中，数据可视化是非常重要的一部分。ECharts 作为一个功能强大且易于使用的开源数据可视化库，被广泛应用于各种图表展示需求中。而 Vue.js 是当下流行的前端框架之一，它的数据驱动和组件化开发模式让我们能轻松地将 ECharts 集成到 …...

编程日记 2025/5/16 7:45:46

KAFKA 权威指南笔记（一）究竟应该配置多少个BROKER？

一个KAFKA集群需要多少个BROKER？ 一个单独的Kafka服务器被叫做BROKER，BROKER可以处理数千个分区以及每秒百万级别的消息量。由BROKER组成了“集群”（其中由集群控制器角色的BROKER是从成员中选举出来的，负责控制管理工作&#xf…...

编程日记 2025/5/8 7:36:14

练习题：20

目录 Python题目题目题目分析 1. 类与变量、属性设计分析 2. Value 属性的实现分析 3. 转换函数分析 4. 整体代码结构与编程规范考虑代码实现代码解释 1. 类定义部分 2. 对象创建与功能测试部分运行思路 1. 类定义阶段 2. 对象创建阶段 3. 获取 Value 属性…...

编程日记 2025/5/17 6:57:42

【时时三省】(C语言基础）动态内存函数malloc

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 malloc 开辟内存块使用格式 void *malloc（size_t sie）； 示例 10*sizeof(int）就是开辟空间的大小如果p是void指针的话 p不能解引用 m…...

编程日记 2025/5/14 2:58:43

大数据学习之Redis 缓存数据库二，Scala分布式语言一

一.Redis 缓存数据库二 26.Redis数据安全_AOF持久化机制 27.Redis数据安全_企业中该如何选择持久化机制 28.Redis集群_主从复制概念 29.Redis集群_主从复制搭建 30.Redis集群_主从复制原理剖析 31.Redis集群_哨兵监控概述 32.Redis集群_配置哨兵监控 33.Redis集群_哨兵监控原理…...

编程日记 2025/5/15 2:34:10

第23天:信息收集-APP应用产权渠道服务资产通讯抓包静态提取动态调试测试范围

#知识点 1、信息收集-APP应用-公开信息-知识产权&开发者定位 2、信息收集-APP应用-资产信息-抓包&静态提取&动态调试一、APP渗透测试的范围->应涵盖APP所有功能和组件，包括但不限于以下几个方面： 1、前端安全：包括界面交互、…...

编程日记 2025/5/17 13:51:11

每日一练 | DHCP 客户端续约过程

01 真题题目在 DHCP 运行过程中，如果客户端 IP 地址在租约过去 87.5%还没有完成续约的话，客户端将发送什么报文进行再次续约？ A. DHCPdiscover 广播报文 B. DHCP release 单播报文 C. DHCPrequest 广播报文 D. DHCPrequest 单播报文 02 真题…...

编程日记 2025/5/17 14:00:17

存储块的获取与释放

目录获取存储块释放存储块设计实现获取存储块有空闲存储块，直接取出空闲块； 无空闲存储块，任务进入等待队列。释放存储块无任务等待，插入到空闲链表； 有任务等待，释放等待队列头部的任务。设计实现…...

编程日记 2025/5/16 23:07:41

定位方式：css

使用相对路径 div ul #div下的所有ul，空格表示相对路径（这个实际中用的多一些） 绝对路径-一般不用绝对路径 html>head>div，“>”表示根路径使用class名称定位使用.表示使用id定位使用#表示使用属性定位 [属性名…...

编程日记 2025/5/17 12:18:10

主从复制架构介绍和主从复制配置案例

每一个数据库的业务都对应着一个前端的业务， 主从复制架构的必要性? 第一点是两个服务器如果有一台服务器出现故障，那么另一台服务器可以正常工作，以保障前端业务可以被正常访问，第二点是两个服务器可以共同去处理数据&#xff…...

编程日记 2025/5/17 13:37:34

零跑汽车一路狂飙

新能源汽车市场潮起潮落，只有潮水退去，才能看清谁在裸泳。十年前，一批新能源汽车新势力带着创新的理念和先进的技术，如雨后春笋般涌入中国汽车市场，掀起一场新旧势力的角逐。经历市场的激烈洗礼与投资泡沫的挤压&…...

编程日记 2025/5/12 9:21:28

固态硬盘SSD

目录 1、固态硬盘结构 2、访问和读取策略 3、固态硬盘 VS SSD固态硬盘 （1）速度 （2）性能 （3）使用寿命 4、磨损均衡技术 （1）动态磨损均衡 （2）静态磨损…...

编程日记 2025/5/17 4:48:41

MTEB文本向量化评估基准：Massive Text Embedding Benchmark

Massive Text Embedding Benchmark 文本向量化评估基准 Bitext mining is the task of finding parallel sentences in two languages. 双语文本挖掘是识别两种语言中语义等价句子对的任务。 Classification is the task of assigning a label to a text. 文本分类是为文本分配…...

编程日记 2025/5/13 11:07:39

【Compose multiplatform教程09】【组件】Image组件

查看全部组件 Image 功能说明：能够加载并显示图片，支持本地资源和网络资源，可对图片的大小、缩放方式、裁剪等属性进行设置，使图片以合适的方式展示在界面中，增强界面的视觉效果。示例场景：在应用的启动页…...

编程日记 2025/5/17 5:52:43

android jetpack compose Model对象更新变量 UI不更新、不刷新问题

以前是搞老本行Android原生开发的，因为工作原因，一直在用vue小程序；因为一些工作需要，又需要用到Android原生开发，建了个项目，打开源码一看，天塌了！！！我以前的…...

编程日记 2025/5/9 11:43:11

Java抽象工厂+单例模式

在前端时间开发过程中，有这样一个业务场景：A;B两家厂商设备进行设备信息的同步功能。根据实际场景，做了抽象工厂+单例模式实现调用工厂时，生成不同的具体业务引用对象，实现方法的调用。概念：抽象工厂模式通过接口或抽象类来创建一系列相关或依赖对象。它定义了一组工…...

编程日记 2025/5/13 14:59:13

React 第十九节 useLayoutEffect 用途使用技巧注意事项详解

1、概述 useLayoutEffect 是useEffect 的一个衍生版本，只是他们的执行时机不同 useLayoutEffect 用于在DOM更新执行完成之后，浏览器渲染绘制之前执行，这会阻塞浏览器的渲染； useEffect 的执行时机是在组件首次渲染和更新渲染之后…...

编程日记 2025/5/13 14:01:13

以太网协议实现——FPGA学习笔记23

一、简介 FPGA千兆网口数据传输MDIO接口——FPGA学习笔记3_yt8531sh原理图-CSDN博客 1、以太网帧类型 2、以太网帧格式 3、以太网MAC帧格式二、以太网报文目的IP ：ff ff ff ff ff ff（广播IP地址）类型：ARP （0806）源MAC地址：74 7d 24 92 fb df 单播 …...

编程日记 2025/5/12 22:26:21

docker 实践与应用举例

docker 实践与应用举例 Docker是一个开源的容器化平台，它允许开发人员将应用程序及其依赖项打包为一个轻量级、可移植的容器，并在不同的环境中运行。Docker的基本概念包括以下几点： 1. 容器：Docker通过使用Linux容器技术&#x…...

编程日记 2025/5/9 23:01:41

双指针——有效三角形的个数

一.题目描述 611. 有效三角形的个数 - 力扣（LeetCode） 二.题目解析题目其实很简单就是让我们在数组中找到可能构成三角形的所有可能。构成三角形的前提是：任意两边之和大于第三边。所以我们要满足让下面三条同时成立才可以构成三角形&am…...

编程日记 2025/5/6 0:42:44

【ES6复习笔记】函数参数的默认值（6）

在ES6中，函数参数默认值是一个非常有用的特性，它允许你在定义函数时为参数指定一个默认值。如果在调用函数时没有提供相应的参数值，那么函数将使用默认值。 1. 形参初始值具有默认值的参数，一般位置要靠后。这是一个潜规则&…...

编程日记 2025/5/14 17:24:31

tryhackme-Cyber Security 101-Linux Shells（linux命令框）

目的：了解脚本和不同类型的 Linux shell。任务1：Introduction to Linux Shells（Linux Shell 简介） 作为操作系统的常规用户，我们都广泛使用图形用户界面 （GUI） 来执行大多数操作。只需点击几…...

编程日记 2025/4/18 9:52:46

【Go】-限流器的四种实现方法

目录关于限流和限流器固定窗口限流器滑动窗口限流器漏桶限流器令牌桶限流器总结关于限流和限流器限流（Rate Limiting）是一种控制资源使用率的机制，通常用于防止系统过载和滥用。限流器（Rate Limiter）是…...

编程日记 2025/5/2 8:15:18

精准识别花生豆：基于EfficientNetB0的深度学习检测与分类项目

精准检测花生豆：基于EfficientNet的深度学习分类项目在现代农业生产中，作物的质量检测和分类是确保产品质量的重要环节。针对花生豆的检测与分类需求，我们开发了一套基于深度学习的解决方案，利用EfficientNetB0模型实现高效、准…...

编程日记 2025/5/17 15:01:36

【信息系统项目管理师】第11章：项目成本管理过程详解

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录一、规划成本管理1、输入2、工具与技术3、输出二、估算成本1、输入2、工具与技术3、输出三、制定预算1、输入2、工具与技术3、输出四、控制成本1、输入2、工具与技术3、输出一、规划成本管理定义：规划成本管…...

编程日记 2025/5/7 13:50:11

微信流量主挑战：用户破16！新增文档转换（新纪元3）

朋友们，报告好消息！我的小程序用户数量已经涨到16个了！没错，真没拉朋友圈亲戚好友来撑场子，全靠实力（和一点点运气）吸引了16位陌生小伙伴光临！这波进步，连我自己都感动了…...

编程日记 2025/5/17 6:29:08

DFS【东北大学oj数据结构11-2】C++

题面深度优先搜索（DFS）是一种基于尽可能多地访问相邻顶点策略的图搜索算法。如果顶点 v 有未搜索的顶点则递归搜索直至 v 的最后一条边。在搜索了 v 的所有边之后，搜索继续返回到找到 v 时经过的边。搜索从原来的起点开始，直到…...

编程日记 2025/5/13 5:57:25

运维项目部署的环境准备

这里用的安装工具是yum,yum作为一个安装工具,用起来比较方便用yum安装以下软件,组成项目的可运行环境 yum 先更新 yum update -y 安装一个外置仓库 yum install epel-release 安装redis yum install redis 安装nginx yum install nginx 安装vim yum install vim…...

编程日记 2025/5/17 9:31:27

URDF文件中inertial数据的描述坐标系说明

这件事的来源是这样的：结构手动把连杆坐标系下描述的惯性张量数据写入了urdf中，给我到以后发现有问题，给我搞懵了，以为我错了这么多年，于是有了本次的深度调研，先上结论，感兴趣的可以参考后文。…...

编程日记 2025/4/28 21:27:51

OpenCV-Python实战（5）——图形绘制基础

一、直线 cv2.line(img*,pt1*,pt2*,color*,thickness*,lineTypeLINE_8) img：绘图的背景（画布）。 pt1、pt2：始/终点坐标，格式为元组（）。 color：直线颜色，BGR格式。 t…...

编程日记 2025/5/12 2:51:45

科技云报到：人工智能时代“三大件”：生成式AI、数据、云服务

科技云报到原创。就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设，成为了人类社会数字化迁徙的助推剂，让新三大件之间的耦合越来越紧密。从物理世界到数字世…...

编程日记 2025/4/21 15:17:42

HarmonyOS NEXT 实战之元服务：静态案例效果（二）

背景： 前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考先上本期效果图 ，里面图片自行替换效果图代码案例如下： Index里面实现 import { authent…...

编程日记 2025/5/1 14:39:15

Qt学习记录

Qt学习记录 Qt6读取GBK文件在Qt5中，有QTextCodec模块，支持各种编码设置。 // Qt5 QCoreApplication a(argc, argv); auto desk QStandardPaths::writableLocation(QStandardPaths::DesktopLocation); QFile file(QDir(desk).filePath("test.tx…...

编程日记 2025/5/3 11:21:06

用于汽车碰撞仿真的 Ansys LS-DYNA

使用 Ansys LS-DYNA 进行汽车碰撞仿真汽车碰撞仿真简介汽车碰撞仿真是汽车设计和安全工程的一个关键方面。这些仿真使工程师能够预测车辆在碰撞过程中的行为，从而有助于改进安全功能、增强车辆结构并符合监管标准。Ansys LS-DYNA 是一款广泛用于此类仿真的强大工具…...

编程日记 2025/5/12 1:12:12

Android--java实现手机亮度控制

文章目录 1、开发需求2、运行环境3、主要文件4、布局文件信息5、手机界面控制代码6、debug 1、开发需求需求：开发一个Android apk实现手机亮度控制 2、运行环境 Android studio最新版本 3、主要文件 app\src\main\AndroidManifest.xml app\src\main\res\layou…...

编程日记 2025/4/27 16:08:39

300多种复古手工裁剪拼贴艺术时尚字母、数字、符号海报封面Vlog视频MOV+PNG素材

300复古时尚大小写字母、数字、符号拼贴海报封面平面设计Vlog视频标题动画 Overlay - Cut-Out Letters Animations Pack - Animated Letters, Numbers, and Symbols 使用 Cut-Out Letters Animations Pack 提升您的内容！包含 300多个高品质动画资源，包括…...

编程日记 2025/5/5 5:57:32

往期内容：

1) 基本实现

2) 支持嵌套

3) 解决循环引用问题

相关文章：