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

《Vue进阶教程》第三十一课：ref的初步实现

news 2025/11/11 3:48:05

 往期内容：

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

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

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

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

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

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

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

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

《Vue进阶教程》第二十八课：实现新旧值

《Vue进阶教程》第二十九课：立即执行的回调

《Vue进阶教程》第三十课：watchEffect

1 为什么需要ref

由于proxy只能代理引用类型数据(如: 对象, 数组, Set, Map...), 需要一种方式代理普通类型数据(String, Number, Boolean...)

设计ref主要是为了处理普通类型数据, 使普通类型数据也具有响应式

除此之外, 通过reactive代理的对象可能会出现响应丢失的情况. 使用ref可以在一定程度上解决响应丢失问题

2 初步实现

1) 包裹对象

既然proxy不能代理普通类型数据, 我们可以在普通类型数据的外层包裹一个对象

用proxy代理包裹的对象(wrapper). 为了统一, 给包裹对象定义value属性, 最后返回wrapper的代理对象

function ref(value) {const wrapper = {value: value,}return reactive(wrapper)
}

测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>function ref(value) {const wrapper = {value: value,}return reactive(wrapper)}// count是一个proxy对象const count = ref(1)effect(() => {// 访问proxy对象的属性 触发 getter 收集依赖console.log(count.value)})setTimeout(() => {count.value = 2}, 1000)</script></body>
</html>

2) 添加标识

按照上面的实现, 我们就无法区分一个代理对象是由ref创建, 还是由reactive创建, 比如下面的代码

ref(1)
reactive({value: 1})

为了后续能够对ref创建的代理对象自动脱ref处理, 即不用.value访问.

考虑给ref创建的代理对象添加一个标识

示例

function ref(value) {const wrapper = {value: value,}// 给wrapper添加一个不可枚举, 不可写的属性__v_isRefObject.defineProperty(wrapper, '__v_isRef', {value: true,})return reactive(wrapper)
}

在Vue3源码中, 虽然不是按上述方式实现的, 但是可以这样去理解

相关文章：

《Vue进阶教程》第三十一课：ref的初步实现

往期内容&#xff1a; 《Vue进阶教程》第二十课&#xff1a;lazy懒执行 《Vue进阶教程》第二十一课&#xff1a;支持缓存 《Vue进阶教程》第二十二课&#xff1a;自定义更新(调度器) 《Vue进阶教程》第二十三课&#xff1a;渲染计算属性的结果 《Vue进阶教程》第二十四课&…...

编程日记 2024/12/31 16:00:07

C语言初阶习题【19】三子棋游戏

1.实现三子棋游戏 2.思路 我们把游戏实现部分放在game.c和game.h中&#xff0c;把游戏的测试代码放到test.c中 main函数在test.c中。 2.1 test.c中 先写main 函数&#xff0c;在main函数中调用test函数。 int main() {test();return 0; }test.c函数实现让玩家进行选择是否…...

编程日记 2024/12/31 15:58:05

Linux day 1129

家人们今天继续学习Linux&#xff0c;ok话不多说一起去看看吧 三.Linux常用命令 3.1 Linux命令体验 3.1.1 常用命令演示 在这一部分中&#xff0c;我们主要介绍几个常用的命令&#xff0c;让大家快速感 受以下 Linux 指令的操作方式。主要包含以下几个指令&#xff1a; ls命…...

编程日记 2024/12/31 15:51:58

【优化算法】梯度优化算法：一种新的原启发式优化算法算法

目录 1.摘要2.算法原理3.结果展示4.参考文献5.获取代码 1.摘要 本文提出了一种新型的元启发式优化算法——梯度优化器&#xff08;Gradient-based Optimizer, GBO&#xff09;。GBO算法灵感来源于牛顿法&#xff0c;采用两个主要操作&#xff1a;梯度搜索规则&#xff08;Grad…...

编程日记 2024/12/31 15:50:56

内部类（3）

大家好&#xff0c;今天我们继续来看看内部类&#xff0c;今天我们来学习一下内部类的分类&#xff0c;我们来看看一共有几种&#xff0c;它们有什么作用&#xff0c;那么话不多说&#xff0c;我们直接开始。 9.1 内部类的分类 先来看下,内部类都可以在一个类的哪些位置进行定…...

编程日记 2024/12/31 15:48:53

svn分支相关操作（小乌龟操作版）

在开发工作中进行分支开发&#xff0c;涉及新建分支&#xff0c;分支切换&#xff0c;合并分支等 新建远程分支 右键选择branch/tagert按钮 命名分支的路径名称 点击确定后远程分支就会生成一个当时命名的文件夹&#xff08;开发分支&#xff09; 分支切换 一般在开发阶段&a…...

编程日记 2024/12/31 15:47:49

rust_shyper

title: 探索 Rust_Shyper&#xff1a;系统编程的新前沿 date: ‘2024-12-30’ category: blog tags: Rust_ShyperRust 语言系统编程性能与安全 sig: Virt archives: ‘2024-12’ author:way_back summary: Rust_Shyper 作为基于 Rust 语言的创新项目&#xff0c;在系统编程领域…...

编程日记 2024/12/31 15:46:46

HAL 库 HAL_UARTEx_ReceiveToIdle_IT 函数解析

一、存在位置&#xff1a;stm32f1xx_hal_uart.c 二、具体代码 二、返回值&#xff1a;HAL_StatusTypeDef 通过查看返回值HAL_StatusTypeDef在stm32f1xx_hal_edf.h文件中定义为结构体类型。 status&#xff1a;&#xff08;进展的&#xff09;状况&#xff0c;情形 三、函数名…...

编程日记 2024/12/31 15:42:42

【ArcGIS Pro】完整的nc文件整理表格模型构建流程及工具练习数据分享

学术科研啥的要用到很多数据&#xff0c;nc文件融合了时间空间数据是科研重要文件。之前分享过怎样将nc文件处理成栅格后整理成表格。小编的读者还是有跑不通整个流程的&#xff0c;再来做一篇总结篇&#xff0c;也分享下练习数据跟工具&#xff0c;如果还是弄不了的&#xff0…...

编程日记 2024/12/31 15:41:41

REDIS的集群

REDIS的集群模式&#xff1a; 主从模式&#xff1a;redis高可用的基础&#xff0c;哨兵和集群都是建立在此基础之上 特点&#xff1a; 主从模式和数据库的主从模式&#xff08;工作模式&#xff09;是一样的&#xff0c;主负责写入&#xff0c;然后把写入到数据同步到从&…...

编程日记 2024/12/31 15:40:40

酒店管理系统的设计与实现【源码+文档+部署讲解】

酒店管理系统的设计与实现 摘 要 中国经济近几年来取得蓬勃飞速发展&#xff0c;使得人民生活水平的要求和生活的质量有了很高的要求。因此人们对外出旅游和就餐的需求也越来越大。同时&#xff0c;随着我国科技水平的兴起和对互联网新时代的大力支持&#xff0c;酒店管理系统在…...

编程日记 2024/12/31 15:39:39

[论文阅读] (34)ESWA2024 基于SGDC的轻量级入侵检测系统

《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座&#xff0c;并分享给大家&#xff0c;希望您喜欢。由于作者的英文水平和学术能力不高&#xff0c;需要不断提升&#xff0c;所以还请大家批评指正&#xff0c;非常欢迎大家给我留言评论&#xff0c;学术路上期…...

编程日记 2024/12/31 15:35:35

从社区共识到资本效能：解析SYNBO的去中心化投资协议创新

Web3 资本市场正处于深刻变革的关键节点。随着去中心化技术的不断进化&#xff0c;传统风险投资模式逐渐显现出效率、透明性与公平性等方面的局限性。而 SYNBO 的出现&#xff0c;为这一市场注入了全新的可能性。 作为新一代去中心化风险投资协议&#xff0c;SYNBO 不仅创新性地…...

编程日记 2024/12/31 15:34:34

一、数据库 Sqlite3 资料

SQLite3 教程 SQLite3 是一个轻量级的嵌入式数据库引擎&#xff0c;它不需要单独的服务器进程&#xff0c;数据库直接存储在磁盘文件中。Python 内置了 sqlite3 模块&#xff0c;可以方便地操作 SQLite 数据库。以下是 SQLite3 的详细教程。 1. SQLite3 简介 SQLite3 是一个自…...

编程日记 2024/12/31 15:30:29

Passlib库介绍及使用指南

什么是Passlib&#xff1f; Passlib是一个强大的Python密码哈希库&#xff0c;它支持多种哈希算法和工具。 Passlib不仅提供了易于使用的API&#xff0c;还集成了多种安全特性&#xff0c;如加盐、密钥派生函数等&#xff0c;广泛应用于用户账户系统、敏感数据保护和多因素认证…...

编程日记 2024/12/31 15:29:28

模型选择+过拟合欠拟合

训练误差和泛化误差 训练误差&#xff1a;模型在训练数据上的误差 泛化误差&#xff1a;模型在新数据上的误差 验证数据集&#xff1a;一个用来评估模型好坏的数据集 例如拿出50%的数据作为训练 测试数据集&#xff1a;只能用一次 K则交叉验证 在没有足够数据时使用 算法…...

编程日记 2024/12/31 15:28:27

绝美的数据处理图-三坐标轴-散点图-堆叠图-数据可视化图

clc clear close all %% 读取数据 load(MyColor.mat) %读取颜色包for iloop 1:25 %提取工作表数据data0(iloop) {readtable(data.xlsx,sheet,iloop)}; end%% 解析数据 countzeros(23,14); for iloop 1:25index(iloop) { cell2mat(table2array(data0{1,iloop}(1,1)))};data(i…...

编程日记 2024/12/31 15:27:26

损失函数-二分类和多分类

二分类和多分类的损失函数 二分类 损失函数 L ( y , y ^ ) − ( y l o g ( y ^ ) ) ( 1 − y ) l o g ( 1 − y ^ ) L(y,\hat{y}) -(ylog(\hat{y})) (1-y)log(1-\hat{y}) L(y,y^​)−(ylog(y^​))(1−y)log(1−y^​) 其中真实标签表示为y&#xff08;取值为 0 或 1&#…...

编程日记 2024/12/31 15:26:24

汽车损坏识别检测数据集，使用yolo，pasical voc xml，coco json格式标注，6696张图片，可识别11种损坏类型，识别率89.7%

汽车损坏识别检测数据集&#xff0c;使用yolo&#xff0c;pasical voc xml&#xff0c;coco json格式标注&#xff0c;6696张图片&#xff0c;可识别11种损坏类型损坏&#xff1a; 前挡风玻璃&#xff08;damage-front-windscreen &#xff09; 损坏的门 &#xff08;damaged-d…...

编程日记 2024/12/31 15:24:22

从 Elastic 迁移到 Easysearch 指引

从 Elasticsearch 迁移到 Easysearch 需要考虑多个方面&#xff0c;这取决于当前使用的 Elasticsearch 版本、能容忍的停机时间、应用需求等。在此背景下&#xff0c;我们梳理了一下通用的升级指引&#xff0c;方便大家进行迁移工作。 迁移路径 Elasticsearch 版本快照兼容推…...

编程日记 2024/12/31 15:22:19

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/10 14:23:03

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/7 13:08:40

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/11/8 3:56:30

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/9 4:07:34

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34