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

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

news 2026/4/8 1:02:55

 往期内容：

《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

LeetCode--344.反转字符串（字符串/双指针法）

344.反转字符串 题目描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#x…...

编程新知 2026/4/8 0:48:08

python gitlab

# 聊聊Python GitLab库&#xff1a;不只是个API封装 如果你在Python项目里用过GitLab&#xff0c;大概率会遇到一个叫python-gitlab的库。第一次看到它的时候&#xff0c;很多人会想&#xff1a;“这不就是个简单的API封装吗&#xff1f;”用了一段时间后才发现&#xff0c;事情…...

编程新知 2026/4/8 0:23:32

告别假阳性！用TAGS多模态提示策略，精准提升你的医学影像分割模型性能

告别假阳性&#xff01;用TAGS多模态提示策略&#xff0c;精准提升你的医学影像分割模型性能 医学影像分割一直是计算机辅助诊断中的核心挑战&#xff0c;尤其是肿瘤这类边界模糊、形态多变的病灶。传统方法依赖大量标注数据和复杂的后处理&#xff0c;而基础模型直接迁移又面临…...

编程新知 2026/4/8 0:07:04

基于深度学习的香梨产量预测系统设计与实现(UI界面+数据集+训练代码)

摘要&#xff1a;本研究针对香梨产业园果实数量统计和产量预测中人工清点效率低、主观性强、难以满足规模化管理需求等问题&#xff0c;设计并实现了一套基于深度学习的香梨产量预测系统。系统以香梨图像为研究对象&#xff0c;融合目标检测、特征工程与回归分析方法&#xff0…...

编程新知 2026/4/7 21:49:09

3分钟掌握DeepLabV3+语义分割：从零开始训练你的第一个图像分割模型 [特殊字符]

3分钟掌握DeepLabV3语义分割&#xff1a;从零开始训练你的第一个图像分割模型 &#x1f680; 【免费下载链接】deeplabv3-plus-pytorch 这是一个deeplabv3-plus-pytorch的源码&#xff0c;可以用于训练自己的模型。 项目地址: https://gitcode.com/gh_mirrors/de/deeplabv3-p…...

编程新知 2026/4/7 21:39:02

淘宝 API 技术架构与实战指南：从实时数据流到 AIGC 融合的电商开发新范式

在数字经济加速渗透的今天&#xff0c;淘宝开放平台 API 已从简单的数据交互工具进化为支撑电商创新的核心基础设施。2025 年&#xff0c;淘宝 API 体系迎来重大技术跃迁&#xff0c;实时数据流、GraphQL 接口与隐私合规构成新的技术三角&#xff0c;推动电商开发进入 "毫…...

编程新知 2026/4/7 21:22:42

代码审查实战：如何写出有建设性的评论

在当今追求快速交付的软件开发流程中&#xff0c;代码审查&#xff08;Code Review&#xff09;已成为保障产品质量、促进知识共享和提升团队协作不可或缺的关键环节。然而&#xff0c;代码审查的价值并不仅仅在于“发现错误”&#xff0c;更在于通过有建设性的评论&#xff0c…...

编程新知 2026/4/7 20:29:53

5分钟上手BilibiliDown：Windows/Mac/Linux三平台通用的B站视频下载神器

5分钟上手BilibiliDown&#xff1a;Windows/Mac/Linux三平台通用的B站视频下载神器 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.…...

编程新知 2026/4/7 19:28:41

终极指南：如何实现gumbo-parser跨编译器开发，统一代码风格与宏定义

终极指南&#xff1a;如何实现gumbo-parser跨编译器开发&#xff0c;统一代码风格与宏定义 【免费下载链接】gumbo-parser An HTML5 parsing library in pure C99 项目地址: https://gitcode.com/gh_mirrors/gum/gumbo-parser Gumbo-Parser 是一款纯C99实现的HTML5解析库…...

编程新知 2026/4/7 17:14:49

效率提升秘籍：用快马平台AI快速生成并对比多种代码性能优化方案

今天想和大家分享一个前端性能优化的实战案例——如何快速对比不同优化方案对大数据列表渲染性能的影响。最近在做一个需要展示上万条数据的项目时&#xff0c;遇到了明显的卡顿问题&#xff0c;正好用InsCode(快马)平台尝试了多种优化方案&#xff0c;效果非常显著。 问题背景…...

编程新知 2026/4/7 16:26:31