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

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

news 来源：原创 2025/7/21 0:40:28

往期内容：

《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的初步实现

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

编程日记 2025/7/21 0:40:28

Wend看源码-Java-集合学习(Queue)

概述 Wend看源码-Java-集合学习(List)-CSDN博客 Wend看源码-Java-集合学习(Set)-CSDN博客在前两篇文章中，我们分别探讨了Java集合框架的父类以及List集合和Set集合的实现。接下来，本文将重点阐述Java中的Queue集合，包括其内部的数据结…...

编程日记 2025/7/20 23:59:59

大数据面试笔试宝典之HBase面试

1.HBase 数据存储位置 HBase 中的数据存储在哪里？以什么格式存储？和 Zookeeper 什么关系？参考答案： 1.HBase 中的所有数据文件都存储在 Hadoop HDFS 文件系统上。 2.包含两种文件类型： HFile ： HBase 中 KeyValue 数据的存储格式。HFile 是 Hadoop 的二进制格式文件…...

编程日记 2025/7/20 23:57:45

React基础知识学习

学习React前端框架是一个系统而深入的过程，以下是一份详细的学习指南： 一、React基础知识 React简介 React是一个用于构建用户界面的JavaScript库，由Facebook开发和维护。它强调组件化和声明式编程，使得构建复杂的用户界面变得更…...

编程日记 2025/7/18 23:53:26

实战指南：Shiro、CAS打造完美单点登录体验

引言想象一下，在日常工作中，我们经常需要进行系统认证和授权。当用户尝试登录一个网站时，他们需要提供用户名和密码，网站会检查这些信息，确认用户是谁。这就是认证的过程。一旦用户被认证，他们可能会尝…...

编程日记 2025/7/21 0:33:38

光储充一体化解决方案详解。

一、光储充介绍 1、什么是光储充 “光储充”一体化，顾名思义，是由光伏发电、储能、充电集成一体、互相协调支撑的绿色充电模式。其工作原理是利用光伏发电，余电由储能设备存储，共同承担供电充电任务。在用电高峰，光储…...

编程日记 2025/7/16 12:25:31

TDengine 新功能 VARBINARY 数据类型

1. 背景 VARBINARY 数据类型用于存储二进制数据，与 MySQL 中的 VARBINARY 数据类型功能相同，VARBINARY 数据类型长度可变，在创建表时指定最大字节长度，使用进按需分配存储，但不能超过建表时指定的最大值。 2. 功能说明…...

编程日记 2025/7/21 0:08:18

2024年秋词法分析作业(满分25分)

【问题描述】请根据给定的文法设计并实现词法分析程序，从源程序中识别出单词，记录其单词类别和单词值，输入输出及处理要求如下： （1）数据结构和与语法分析程序的接口请自行定义；类别码需按下表格…...

编程日记 2025/7/21 0:04:30

AF3 checkpoint_blocks函数解读

checkpoint_blocks 函数实现了一种分块梯度检查点机制 (checkpoint_blocks)，目的是通过分块（chunking）执行神经网络模块，减少内存使用。在深度学习训练中，梯度检查点（activation checkpointing）是一种显存优化技术。该代码可以：对神经网络的块（blocks）按需分块，并对…...

编程日记 2025/7/21 0:02:14

VITUREMEIG | AR眼镜算力增程

根据IDC发布的《2024年第三季度美国AR/VR市场报告》显示，美国市场AR/VR总出货量增长10.3%。其中，成立于2021年的VITURE增长速度令人惊艳，同比暴涨452.6%，成为历史上增长最快的AR/VR品牌。并在美国AR领域占据了超过50%的市场份额&a…...

编程日记 2025/7/21 0:06:09

详解MySQL在Windows上的安装

目录查看电脑上是否安装了MySQL 下载安装MySQL 打开MySQL官网，找到DOWNLOADS 然后往下翻，找到MySQL Community(GPL) Downloads>> 然后找到MySQL Community Server 然后下载，选择No thanks,just start my download. 然后双击进行…...

编程日记 2025/7/21 0:15:21

细说STM32F407单片机CAN基础知识及其HAL驱动程序

目录一、CAN总线结构和传输协议 1、 CAN总线结构 （1）闭环结构的CAN总线网络 （2）开环结构的CAN总线网络 （3）隐性电平和显性电平 2、CAN总线传输协议 （1）CAN总线传输特点 &am…...

编程日记 2025/7/21 0:20:12

Ubuntu 22.04 升级 24.04 问题记录

一台闲置笔记本使用的 ubuntu 还是 18.04，最近重新使用，发现版本过低，决定升级，于是完成了 18.04 -> 20.04 -> 22. 04 -> 24.04 的三连跳。一、升级过程中黑屏主要问题是在 22.04 升级到 24.04 过程中出现了黑屏仅剩…...

编程日记 2025/7/20 8:16:37

模型选择+过拟合欠拟合

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

编程日记 2025/7/21 0:21:11

Leetcode 3404. Count Special Subsequences

Leetcode 3404. Count Special Subsequences 1. 解题思路2. 代码实现题目链接：3404. Count Special Subsequences 1. 解题思路这道题是事实上这次的周赛最难的一道题目，不过也是有点巧思在内。最开始我的想法就是按照乘积构成pair，然后…...

编程日记 2025/7/21 0:26:15

萌萌哒的八戒

萌萌哒的八戒下载压缩包后，打开发现有一张照片既然是关于猪的，那就用猪圈密码解码 flag{whenthepigwanttoeat}...

编程日记 2025/7/8 10:11:56

开启家具组装新方式：产品说明书智能指导

在快节奏的现代生活中，人们越来越追求便捷与高效。无论是新房装修还是家具换新，家具组装已成为许多家庭不可避免的一项任务。然而，面对复杂多变的家具图纸和冗长的产品说明书，许多人常常感到无从下手，甚至因操作不当而…...

编程日记 2025/7/20 19:09:12

【连续学习之ResCL算法】2020年AAAI会议论文：Residual continual learning

1 介绍年份：2020 会议： AAAI Lee J, Joo D, Hong H G, et al. Residual continual learning[C]//Proceedings of the AAAI Conference on Artificial Intelligence. 2020, 34(04): 4553-4560. 本文提出的算法是Residual Continual Learning (ResC…...

编程日记 2025/7/21 0:14:15

【网络协议】路由信息协议 (RIP)

未经许可，不得转载。路由信息协议（Routing Information Protocol，简称 RIP）是一种使用跳数（hop count）作为路由度量标准的路由协议，用于确定源网络和目标网络之间的最佳路径。文章目录什么是…...

编程日记 2025/7/21 0:22:13

Linux 终端查看 nvidia 显卡型号

文章目录写在前面1. 需求描述2. 实现方法方法一：方法二方法三： 参考链接写在前面自己的测试环境： Ubuntu20.04 1. 需求描述 Linux 终端查看 nvidia 显卡型号 2. 实现方法方法一： 执行下列指令： sudo update…...

编程日记 2025/7/18 3:58:29

基于neurokit2的心电仿真数据生成实例解析

一概念 NeuroKit2是一个开源的、社区驱动的、以用户为中心的Python库，可用于多种生理信号的分析处理（例如ECG、PPG、EDA、EMG、RSP），还包括用于特定处理步骤（如频率）的工具提取和过滤方法，并在…...

编程日记 2025/7/21 0:27:14

AMBA-APB

目录 1.APB 协议 2.APB信号列表 3.数据传输 3.1写传输（2种） 3.1.1 无等待状态的写传输 3.1.2有等待状态的写传输 3.2写选通信号 (PSTRB) 字节通道映射 3.3读传输（2种） 3.3.1 无等待状态的读传输 3.3.2有等待状态的读传…...

编程日记 2025/7/20 1:34:25

网安入门之PHP后端基础

PHP 基本概念详解 PHP是一种服务器端脚本语言，常用于动态网站开发和 web 应用程序。以下是 PHP 的基本概念与特点的详细说明： 1. PHP 文件的默认文件扩展名 PHP 文件的扩展名通常为 .php，例如 index.php。PHP 文件可以包含 PHP 代码、HTML…...

编程日记 2025/7/20 15:50:33

windows系统安装完Anaconda之后怎么激活自己的虚拟环境并打开jupyter

1.在win主菜单中找到Anaconda安装文件夹并打开终端文件夹内有所有安装后的Anaconda的应用软件和终端窗口启动窗口点击Anaconda Prompt（Anaconda）就会打开类似cmd的命令终端窗口，默认打开的路径是用户名下的路径 2.激活虚拟环境使用命令…...

编程日记 2025/7/20 10:13:02

【C#特性整理】C#特性及语法基础

1. C#特性 1.1 统一的类型系统 C#中, 所有类型都共享一个公共的基类型. 例如，任何类型的实例都可以通过调用ToString方法将自身转换为一个字符串 1.2 类和接口接口: 用于将标准与实现隔离, 仅仅定义行为,不做实现. 1.3 属性、方法、事件属性: 封装了一部分对…...

编程日记 2025/7/20 1:33:29

龙蜥配置本地yum源8.6----亲测

系统版本：说明：丫丫的，内网服务安装了个龙蜥操作系统。内网不能访问互联网，所以就需要挂载yum源用的以前的方法挂载，一直报错 [Couldnt open file /mnt/anolisos/repodata/repomd.xml] yum挂载的时候报错，奇葩！！！，龙蜥的挂载方法好像不一样。解决：一、上传并挂…...

编程日记 2025/7/16 23:21:25

Xshell日志录制

步骤 1：设置日志文件位置打开 Xshell 软件，选择目标会话（或者创建一个新的会话）。右键点击会话名称，选择“属性”。在会话属性窗口中，找到“日志”选项卡。勾选“启用日志记录”。在“文件名”中设置日志…...

编程日记 2025/7/20 15:57:07

vue下载和上传的地址动态ip地址配置方法

vue3结合element-plus实现【下载文件】和【上传文件】的动态ip地址配置效果图一、修改【文件上传】静态地址 1、首先引入axios import axios from "/utils/request"; import { getToken } from "/utils/auth"; 定义 const importDialogVisible ref(…...

编程日记 2025/7/17 3:53:23

动手做计算机网络仿真实验入门学习

打开软件 work1 添加串行接口模块，先关电源，添加之后再开电源自动选择连接所有传输介质自动连接串行线绿色是通的，红色是不通的。显示接口。se是serial串行的简写。 Fa是fast ethernet的简写。为计算机配置ip地址： 为服…...

编程日记 2025/7/19 14:56:53

LeetCode 面试题 17.10. 主要元素

LeetCode 面试题 17.10. 主要元素数组中占比超过一半的元素称之为主要元素。给你一个整数数组，找出其中的主要元素。若没有，返回 -1 。请设计时间复杂度为 O(N) 、空间复杂度为 O(1) 的解决方案。示例 1： 输入：[1,2,5,9,5,9,5…...

编程日记 2025/7/20 21:05:26

Hive之import和export使用详解

在hive-0.8.0后引入了import/export命令。 Export命令可以导出一张表或分区的数据和元数据信息到一个输出位置，并且导出数据可以被移动到另一个hadoop集群或hive实例，并且可以通过import命令导入数据。当导出一个分区表，原始数据可能在hdf…...

编程日记 2025/7/18 18:13:52

SpringBoot数据字典字段自动生成对应code和desc

效果：接口会返回orderType，但是这个orderType是枚举的类型（1，2，3，4），我想多返回一个orderTypeDesc给前端展示，这样前端就可以直接拿orderTypeDesc使用了。 1. 定义注解 …...

编程日记 2025/7/19 13:41:28

HTML——16.相对路径

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><a href"../../fj1/fj2/c.html" target"_blank">链接到c</a>…...

编程日记 2025/7/14 21:38:33

字——位级运算与有无符号数之间的比较

前言本文整理和归纳《深入理解计算机系统》这本书的内容，但本文不会继续长篇大论地去将所有内容都总结，而是总结笔者认为容易遗忘或混淆或表述不清的内容。字首先字这个概念对于学习过《计算机体系结构》或《操作系统》的同学都不陌生，…...

编程日记 2025/7/15 12:25:47

Python爬虫教程——7个爬虫小案例（附源码）_爬虫实例

本文介绍了7个Python爬虫小案例，包括爬取豆瓣电影Top250、猫眼电影Top100、全国高校名单、中国天气网、当当网图书、糗事百科段子和新浪微博信息，帮助读者理解并实践Python爬虫基础知识。包含编程资料、学习路线图、源代码、软件安装包等！【…...

编程日记 2025/7/19 14:28:17

‘Optional. get()‘ without ‘isPresent()‘ check

在Java中，Optional类被引入主要是为了解决NullPointerException的问题，它提供了一种更优雅的方式来处理可能为null的情况。Optional.get()方法用于获取Optional实例中包含的值，但如果Optional实例是空的（即没有值）&…...

编程日记 2025/7/20 20:05:44

015-spring-动态原理、AOP的xml和注解方式

强制使用cglib动态代理 spring-AOP的使用...

编程日记 2025/7/2 16:15:09

统计颜色Count Color（POJ2777）题解

有一个长度为L厘米板，L是一个正整数，所以我们可以把它均匀地划分成L个部分，分别从左到右编号为1，2……L，每一个部分长度都为1厘米。现在我们必须给每个部分涂色，一个部分一种颜色，要求完成以下两…...

编程日记 2025/7/17 22:28:41

Nginx 配置 SSL（HTTPS）详解

Nginx作为一款高性能的HTTP和反向代理服务器，自然支持SSL/TLS加密通信。本文将详细介绍如何在Nginx中配置SSL，实现HTTPS的访问。随着互联网安全性的日益重要，HTTPS协议逐渐成为网站加密通信的标配。Nginx作为一款高性能的HTTP和反向代理服务…...

编程日记 2025/7/16 1:37:00

Day10补代码随想录理论基础|232.用栈实现队列|225.用队列实现栈|20.有效的括号|1047.删除字符串中的所有相邻重复项

栈和队列理论基础抽象认识栈是先进后出(FIFO)，队列是先进先出(LIFO) 队首(先进))队尾(后进)栈顶(后进)栈底(先进) 栈(Stack) 只在一端进行进出操作(只在一端进一端出)像个篮球框，取用篮球从一端进出。 /进栈 int a[1000];//足够大的栈空间 int top-1…...

编程日记 2025/7/16 5:14:39

pytorch基础之注解的使用--003

Title 1.学习目标2.定义3.使用步骤4.结果 1.学习目标针对源码中出现一些注解的问题，这里专门写一篇文章进行讲解。包括如何自定义注解，以及注意事项，相信JAVA中很多朋友业写过，但是今天写的是Python哦。。。 2.定义在 Python…...

编程日记 2025/7/20 16:03:04

2024-12-30-g++

title: 探秘 g：C 编程的得力编译器 date: ‘2024-12-30’ category: blog tags: gC 编程编译器技术代码生成与优化 sig: compiler archives: ‘2024-12’ author:way_back summary: g 作为专门用于 C 语言的编译器，在 C 开发领域占据关键地位。它凭借对…...

编程日记 2025/7/15 13:46:36

互联网十万个为什么之什么是微服务

微服务（Microservices）是一种软件架构设计模式，它将应用程序分解为小型、自治的服务单元，这些服务单元可以独立部署、扩展和维护，其中每一个服务单元也都是一个微服务。基于微服务形成的软件架构风格称为微服务架构&…...

编程日记 2025/7/19 4:31:32

mysql子查询

子查询是嵌套在另一个 SELECT, INSERT, UPDATE, 或 DELETE查询的 SQL 查询。子查询可以在 WHERE 子句中、FROM 子句或 SELECT 列表中出现。以下是一些使用 MySQL 子查询的常见示例： 1.在 WHERE 子句中使用子查询： SELECT * FROM Employees WHERE s…...

编程日记 2025/7/16 21:50:11

智能故障诊断和寿命预测期刊推荐

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理基于FFT CNN - BiGRU-Attention 时域、频域特征注意力融合的轴承故障识别模型-CSDN博客基于FFT CNN - Transformer 时域、频域特征融合的轴承故障识别模型-CSDN博客 P…...

编程日记 2025/7/20 21:06:16

根据语言变化动态更新图片资源方案

根据语言变化动态更新图片资源方案一、需求描述二、关于 Locale三、实现方案3.1 方案一（不可行）3.2 方案二（不可行）3.3 方案三一、需求描述 Android 项目中引导页图片包含文字信息，由于应用是适配了三种语言&#x…...

编程日记 2025/7/16 1:55:42

Python世界：数据结构易错点小结

Python世界：数据结构易错点小结总体list列表tuple元组Stringdict字典mapset 部分笔记汇总，持续刷新中。区别于其他笔记之处在于，主要记录易错点坑点。总体数据结构声明辨析 list []tuple () const listditc {} hashset res set(list) 数…...

编程日记 2025/7/20 23:52:58