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

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

news 2025/9/18 13:04:10

 往期内容：

《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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/9/14 12:04:54

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/8/25 20:38:36

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/9/3 11:48:38

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/9/2 17:48:56

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/9/3 17:15:14

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/9/10 7:39:21

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/9/3 23:27:37

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2025/9/7 8:49:50

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/7/25 0:58:11