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

手写 vue 源码 === ref 实现

news 来源：原创 2025/8/7 6:40:06

响应式的基本实现

Proxy 与属性访问器

Proxy 的工作原理

属性访问器（Getter/Setter）

为什么解构会丢失响应性

ref 和 toRefs 的解决方案

proxyRefs：自动解包 ref

总结

Vue3 的响应式系统是其核心特性之一，它通过 Proxy 和属性访问器实现了数据的响应式变化。本文将深入探讨非原始值（对象、数组等）的响应式方案，以及为什么解构会导致响应式丢失。

响应式的基本实现

Vue3 的响应式系统主要通过以下几个核心 API 实现：

export function reactive(target: any) {return createReactiveObject(target);
}function createReactiveObject(target: any) {// 只对对象进行代理if (!isObject(target)) {return target;}//  访问属性 会命中 get 方法if (target[ReactiveFlags.IS_REACTIVE]) {return target;}// 如果代理对象已经存在，直接返回const existingProxy = reactiveMap.get(target);if (existingProxy) {return existingProxy;}let proxy = new Proxy(target, mutableHandlers);reactiveMap.set(target, proxy);return proxy;
}

Proxy 与属性访问器

Proxy 的工作原理

Proxy 是 ES6 引入的新特性，它允许我们拦截并自定义对象的基本操作。在 Vue3 中，Proxy 用于拦截对象的属性访问和修改：

export const mutableHandlers: ProxyHandler<any> = {get(target: any, key: any, receiver: any) {if (key === ReactiveFlags.IS_REACTIVE) {return true;}track(target, key);let res = Reflect.get(target, key, receiver);if (isObject(res)) {return reactive(res);}return res;},set(target: any, key: any, value: any, receiver: any) {let oldValue = target[key];let result = Reflect.set(target, key, value, receiver);if (oldValue !== value) {trigger(target, key, value, oldValue);}return result;},
};

属性访问器（Getter/Setter）

属性访问器是 JavaScript 中的一种特性，允许我们通过

get和set 方法来控制对象属性的读取和设置：

let flag1 = {_v: false,get value() { //收集依赖return this._v},set value(newVal) { //触发依赖this._v = newVal}
}

为什么解构会丢失响应性

当我们对响应式对象进行解构时，会丢失响应性，例如：

const state = reactive({ count: 0 });
const { count } = state; // count 不再是响应式的

这是因为解构实际上是创建了一个新的变量，它只是复制了原始值，而不是保持对原始响应式对象的引用。解构后的变量不再被 Proxy 代理，因此无法触发 getter/setter。

ref 和 toRefs 的解决方案

为了解决这个问题，Vue3 提供了ref和toRefs API：

export function ref(value: any) {return createRef(value);
}class RefImpl {public __v_isRef = true;public _value: any;public dep;constructor(public rawValue: any) {this._value = toReactive(rawValue);}get value() {trackRefValue(this);return this._value;}set value(newVal) {if (newVal !== this._value) {this.rawValue = newVal;this._value = newVal;triggerRefValue(this);}}
}

toRefs 将响应式对象的每个属性转换为 ref：

export function toRefs(obj) {const ret = {};for (const key in obj) {ret[key] = toRef(obj, key);}return ret;
}class ObjectRefImpl {public __v_isRef = true;constructor(public _object, public _key) {}get value() {return this._object[this._key];}set value(newVal) {this._object[this._key] = newVal;}
}

proxyRefs：自动解包 ref

为了使用更方便，Vue3 还提供了proxyRefsAPI，它可以自动解包 ref：

export function proxyRefs(obj) {return new Proxy(obj, {get(target, key, receiver) {let res = Reflect.get(target, key, receiver);return res.__v_isRef ? res.value : res;},set(target, key, value, receiver) {let oldValue = target[key];if (oldValue.__v_isRef) {oldValue.value = value;return true;} else {return Reflect.set(target, key, value, receiver);}},});
}

这样，我们就可以像这样使用：

let proxy = proxyRefs({ ...toRefs(obj) })
console.log(proxy.name); // 直接访问，无需 .value
proxy.name = "李四"; // 直接设置，无需 .value

总结

Vue3 的响应式系统通过 Proxy 和属性访问器实现了对非原始值的响应式处理。解构会导致响应式丢失是因为解构创建了新的变量，失去了与原始响应式对象的连接。通过ref、toRefs和proxyRefs 等 API，Vue3 提供了优雅的解决方案，使我们能够在保持响应式的同时，享受更简洁的代码风格。

手写 vue 源码 === ref 实现

目录响应式的基本实现 Proxy 与属性访问器 Proxy 的工作原理属性访问器（Getter/Setter） 为什么解构会丢失响应性 ref 和 toRefs 的解决方案 proxyRefs：自动解包 ref 总结 Vue3 的响应式系统是其核心特性之一，它通过 Pro…...

编程日记 2025/8/7 6:40:06

Python爬虫抓取Bilibili弹幕并生成词云

1. 引言 Bilibili（B站）是国内知名的视频分享平台，拥有海量的弹幕数据。弹幕是B站的核心特色之一，用户通过弹幕进行实时互动，这些数据对于分析视频热度、用户情感倾向等具有重要价值。本文将介绍如何利用Python爬虫技…...

编程日记 2025/8/3 11:59:44

【Python 字典(Dictionary)】

Python 中的字典（Dictionary）是最强大的键值对（key-value）数据结构，用于高效存储和访问数据。以下是字典的核心知识点： 一、基础特性键值对存储：通过唯一键（Key）快速访…...

编程日记 2025/8/3 11:59:42

k8s之探针

探针介绍： 编排工具运行时，虽说pod挂掉会在控制器的调度下会重启，出现pod重启的时候，但是pod状态是running,无法真实的反应当时pod健康状态，我们可以通过Kubernetes的探针监控到pod的实时状态。 Kubernetes三种探针类…...

编程日记 2025/8/3 11:59:38

upload-labs靶场通关详解：第三关

一、分析源代码代码注释如下： <?php // 初始化上传状态和消息变量 $is_upload false; $msg null;// 检查是否通过POST方式提交了表单 if (isset($_POST[submit])) {// 检查上传目录是否存在if (file_exists(UPLOAD_PATH)) {// 定义禁止上传的文件扩展名列表…...

编程日记 2025/8/3 11:59:36

递归法： /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {…...

编程日记 2025/8/7 6:40:04

zst-2001 历年真题 UML

UML - 第1题 ad UML - 第2题依赖是暂时使用对象，关联是长期连接依赖：依夜情关联：天长地久组合：组一辈子乐队聚合：好聚好散 bd UML - 第3题 adc UML - 第4题 bad UML - 第5题 d UML - 第6题 …...

编程日记 2025/8/3 11:59:21

对称加密以及非对称加密

对称加密和非对称加密是两种不同的加密方式，它们在加密原理、密钥管理、安全性和性能等方面存在区别，以下是具体分析： 加密原理对称加密：通信双方使用同一把密钥进行加密和解密。就像两个人共用一把钥匙，用这把钥匙锁…...

编程日记 2025/8/3 11:59:16

Java反射八股版

目录一、核心概念阐释 1. Class类 2. Constructor类 3. Method类 4. Field类二、典型应用场景 1. 框架开发 2. 单元测试 3. JSON序列化/反序列化三、性能考量四、安全与访问控制 1. 安全管理器限制 2. 打破封装性 3. 安全风险五、版本兼容性问题六、最佳…...

编程日记 2025/8/7 6:40:03

C++跨平台开发实践：深入解析与常见问题处理指南

一、跨平台开发基础架构设计 1.1 跨平台架构的核心原则分层设计模式： 平台抽象层(PAL)：将平台相关代码集中管理核心逻辑层：完全平台无关的业务代码平台实现层：针对不同平台的特定实现代码组织最佳实践： pro…...

编程日记 2025/8/3 11:59:03

【“星睿O6”AI PC开发套件评测】+ MTCNN 开源模型部署和测试对比

经过了前几篇文章的铺垫，从搭建 tensorflow 开发环境，到测试官方 onnx 模型部署到 NPU，接着部署自己的 mnist tensorflow 模型到 NPU。这是一个从易到难的过程，本篇文章介绍开源复杂的人脸识别模型 mtcnn 到 “星睿O6” NPU 的部署…...

编程日记 2025/8/3 11:58:59

JAVA实战开源项目：装饰工程管理系统 (Vue+SpringBoot) 附源码x

本文项目编号 T 179 ，文末自助获取源码 \color{red}{T179，文末自助获取源码} T179，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/8/3 11:58:55

centos 7 安装 java 运行环境

centos 7 安装 java 运行环境 java -version java version "1.8.0_131" Java(TM) SE Runtime Environment (build 1.8.0_131-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)java -version java version "1.8.0_144" Java(TM) …...

编程日记 2025/8/7 6:40:05

力扣题解：21.合并两个有序链表（C语言）

将两个升序链表合并为一个新的升序链表是一个经典的链表操作问题。可以通过递归或迭代的方法来解决。以下是解释和代码实现： 递归： 每次比较两个链表的头节点，将较小的节点添加到新链表中，并递归处理剩余部分。截至条件&#xf…...

编程日记 2025/8/3 11:58:48

iOS App 安全性探索：源码保护、混淆方案与逆向防护日常

iOS App 安全性探索：源码保护、混淆方案与逆向防护日常在 iOS 开发者的日常工作中，我们总是关注功能的完整性、性能的优化和UI的细节，但常常忽视了另一个越来越重要的问题：发布后的应用安全。尤其是对于中小团队或独立开发者&…...

编程日记 2025/8/3 6:58:49

SpringBoot默认并发处理(Tomcat)、项目限流详解

SpringBoot默认并发处理在 Spring Boot 项目中，默认情况下，同一时间能处理的请求数由内嵌的 Tomcat 服务器的线程池配置决定。默认并发处理能力请求处理流程请求到达：新请求首先进入 TCP 连接队列（最大 ma…...

编程日记 2025/8/7 6:40:04

Xterminal（或 X Terminal）通常指一类现代化的终端工具工具介绍

Xterminal（或 X Terminal）通常指一类现代化的终端工具，旨在为开发者、运维人员提供更高效、更智能的命令行操作体验。 📢提示：文章排版原因，资源链接地址放在文章结尾👇👇&#xff…...

编程日记 2025/8/3 6:58:42

如何把win10 wsl的安装目录从c盘迁移到d盘

标题：如何把win10 wsl的安装目录从c盘迁移到d盘通过microsoft store安装的 wsl 目录默认在 C:\Users[用户名]\AppData\Local\wsl 下 wsl的docker镜像以及dify的编译环境会占用大量硬盘空间，0.15.3 、1.1.3、1.3.1 三个版本的环境占用空间超过40GB [图…...

编程日记 2025/8/3 6:58:39

2025医疗信息化趋势：健康管理系统如何重构智慧医院生态

当北京协和医院的门诊大厅启用智能分诊机器人时，距离其3000公里外的三甲医院正通过健康管理系统将慢性病复诊率降低42%。这场静默发生的医疗革命，正在重新定义2025年智慧医院的建设标准。一、穿透数据孤岛的三大核心引擎最新版《智慧医院评价指标体系…...

编程日记 2025/8/3 6:58:37

java volatile关键字

volatile 是 Java 中用于保证多线程环境下变量可见性和禁止指令重排序的关键字。普通变量不加volatile修饰有可见性问题，即有线程修改该变量值，其他线程无法立即感知该变量值修改了。代码： private static int intVal 0; // 普通变量未加 …...

编程日记 2025/8/3 6:58:33

中阳策略模型：结构节奏中的方向感知逻辑

中阳策略模型：结构节奏中的方向感知逻辑在交易世界中，“节奏”与“结构”的互动远比大多数人想象得复杂。中阳研究团队在大量实战数据分析中提出一个核心观点：方向感的建立，必须以结构驱动为前提，以节奏确认为依据。 …...

编程日记 2025/8/3 6:58:30

死锁的形成

死锁的形成背景学习资源死锁的本质背景面试可能会被问到. 学习资源一个案例: https://www.bilibili.com/video/BV1pz421Y7kM 死锁的本质互相持有对方的资源. 存在资源竞争都没有释放. 可能出现死锁. insert into demo_user (no, name) values (6, ‘test1’) on dupl…...

编程日记 2025/8/7 6:40:04

每天五分钟深度学习框架pytorch：视觉工具包torchvison

本文重点在pytorch深度学习框架中，torchvision是一个非常优秀的视觉工具包，我们可以使用它加载一些著名的数据集，然后我们可以使用它来加载网络模型，比如vgg，resnet等等，还可以使用它来预处理一些图片数据，本节课程我们将学习一下它的使用方式。 torchvision的四部分…...

编程日记 2025/8/3 6:58:23

C++之运算符重载实例（日期类实现）

日期类实现 C 日期类的实现与深度解析一、代码结构概览1.1 头文件 Date.h1.2 源文件 Date.cpp 二、关键函数实现解析2.1 获取某月天数函数 GetMonthDay2.2 构造函数 Date2.3 日期加减法运算2.4 前置与后置自增/自减操作2.5 日期比较与差值计算三、代码优化与注意事项3.1 代码优…...

编程日记 2025/8/3 6:58:19

数据分析怎么做？高效的数据分析方法有哪些？

目录一、数据分析的对象和目的 （一）数据分析的常见对象 （二）数据分析的目的二、数据分析怎么做？ （一）明确问题 （二）收集数据 （三）清洗和…...

编程日记 2025/8/3 6:58:16

数组和切片的区别

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小…...

编程日记 2025/8/3 6:58:12

【Linux】自定义shell的编写

📝前言： 这篇文章我们来讲讲【Linux】简单自定义shell的编写，通过这个简单的模拟实现，进一步感受shell的工作原理。 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页…...

编程日记 2025/8/3 6:58:08

【C/C++】为什么要noexcept

为什么要noexcept 在C中，noexcept修饰符用于指示函数不会抛出异常 1. 性能优化减少异常处理开销：编译器在生成代码时，若函数标记为noexcept，可以省略异常处理的相关机制（如栈展开代码），从而减…...

编程日记 2025/8/3 6:58:04

运用fmpeg写一个背英文单词的demo带翻译

-男生会因为不配而离开那个深爱的她吗？？ 一， fmpeg-7.0.1 是做什么用的？？ FFmpeg 7.0.1 是 FFmpeg 的一个版本，FFmpeg 是一个开源的多媒体框架，用于处理音视频数据。FFmpeg 提供了强大的工具和…...

编程日记 2025/8/7 6:40:06

Android 项目中配置了多个 maven 仓库，但依赖还是下载失败，除了使用代理，还有其他方法吗？

文章目录前言解决方案gradlemaven 仓库前言我们在Android 开发的过程中，经常会遇到三方依赖下载不下来的问题。一般情况下我们会在项目的build.gradle文件中配置多个 maven 仓库来解决。 // Top-level build file where you can add configuration options com…...

编程日记 2025/8/3 6:57:57

vue3: pdf.js5.2.133 using typescript

npm install pdfjs-dist5.2.133 项目结构： <!--* creater: geovindu* since: 2025-05-09 21:56:20* LastAuthor: geovindu* lastTime: 2025-05-09 22:12:17* 文件相对于项目的路径: \jsstudy\vuepdfpreview\comonents\pdfjs.vue* message: geovindu* IDE: vscod…...

编程日记 2025/8/3 6:57:54

doxygen 生成 html 网页的一个简单步骤

假设项目源码目录是 src 那么在 src 上一级运行： doxygen -g生成 Doxyfile 随后配置 Doxyfile # 项目相关配置 PROJECT_NAME "你的项目名称" PROJECT_NUMBER "1.0" PROJECT_BRIEF "项目简短描述" …...

编程日记 2025/8/3 6:57:51

云原生环境下服务治理体系的构建与落地实践

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：服务治理正在从“框架能力”向“平台能力”演进随着微服务架构逐步成熟，越来越多的企业开始向云原生迁移，Kubernetes、Service Mesh、Serverless 等新兴技术不断推动系统的基础设施演进。与…...

编程日记 2025/8/4 13:48:07

vue 监听元素大小变化 element-resize-detector

1，安装 npm install element-resize-detector --save2、设置成全局插件 element-resize-detector.js： import ElementResizeDetectorMaker from element-resize-detectorexport default {install: function(Vue, name $erd) {Vue.prototype[name] …...

编程日记 2025/8/3 2:28:00

智芯Z20K144x MCU开发之时钟架构

这里写目录标题一、zhixin时钟架构1.时钟源2.系统时钟控制器（SCC）3.外设时钟控制器（PARCC） 二、软件应用三、总结一、zhixin时钟架构可以将时钟架构分解为三个部分来理解： 时钟源（OSC、FIRC、LPO&#…...

编程日记 2025/8/6 17:22:46

levelDB的数据查看（非常详细）

起因:.net大作业天气预报程序(WPF)答辩时，老师问怎么维持数据持久性的，启动时加载的数据存在哪里，我明白老师想考的应该是json文件的解析（正反），半天没答上来存那个文件了（老师默认这个文件是自…...

编程日记 2025/8/5 3:49:00

OpenHarmony平台驱动开发（十），MMC

OpenHarmony平台驱动开发（十） MMC 概述功能简介 MMC（MultiMedia Card）即多媒体卡，是一种用于固态非易失性存储的小体积大容量的快闪存储卡。 MMC后续泛指一个接口协定（一种卡式）&#xff0…...

编程日记 2025/8/3 4:16:09

【Go底层】http标准库服务端实现原理

目录 1、背景2、核心数据结构【1】Server对象【2】Handler对象【3】ServeMux对象 3、服务端代码示例4、路由注册5、路由匹配 1、背景 http协议的交互框架是C-S架构，C对应客户端模块，S对应服务端模块，接下来我们就基于Go1.23源码来熟悉http标…...

编程日记 2025/8/3 4:16:06

现代健康养生新主张

在充满挑战与压力的现代生活中，健康养生已成为提升生活品质的关键。无需复杂的理论与传统养生模式，通过践行以下科学方法，便能轻松拥抱健康生活。压力管理是现代养生的核心。长期高压力状态会引发激素失衡、免疫力下降等问题。尝试每天进…...

编程日记 2025/8/3 4:16:01

Spring 必会之微服务篇（1）

目录引入单体架构集群和分布式架构微服务架构挑战 Spring Cloud 介绍实现方案 Spring Cloud Alibaba 引入单体架构当我们刚开始学开发的时候，基本都是单体架构，就是把一个项目的所有业务的实现功能都打包在一个 war 包或者 Jar 包中。…...

编程日记 2025/8/5 9:31:54

创始人 IP 的破局之道：从技术突围到生态重构的时代启示|创客匠人评述

在 2025 年的商业版图上，创始人 IP 正以前所未有的深度介入产业变革。当奥雅股份联合创始人李方悦在 “中国上市公司品牌价值榜” 发布会上，将 IP 赋能与城市更新大模型结合时，当马斯克在特斯拉财报电话会议上宣称 “未来属于自动驾驶和人形机…...

编程日记 2025/8/6 15:25:12

C++ stl中的stack和queue的相关函数用法

文章目录 stackstack的定义stack的使用 queuequeue的定义queue的使用 stack的使用包含头文件< stack > #include <stack>queue的使用包含头文件< queue > #include <queue>stack stack是一种容器适配器，用于具有后进先出操作的场景中&…...

编程日记 2025/8/3 4:15:54

Navicat BI 数据分析功能上线 | 数据洞察新方法

Navicat 17.2 版本一经发布，便以 AI 助手赋能智能交互、Snowflake 支持拓展数据连接版图、拓展对关系型、维度以及数据仓库 2.0 建模方法的支持等新特性与功能抓住了用户的目光，但其中一项低调且实用的更新 - 在 BI 数据预览中深度集成数据分析工具&…...

编程日记 2025/8/3 10:30:03

【网络编程】四、守护进程实现前后台作业会话与进程组

文章目录 Ⅰ. 守护进程的概念Ⅱ. 理解会话和作业🎏 会话和进程组的特性小总结Ⅳ. 作业的前后台转换1、fg 指令2、bg 指令 Ⅴ. 守护进程实现1、常见接口① 创建守护进程 -- daemon② 自成会话函数 -- setsid③ 获取会话ID函数 -- getsid 2、自主实现守护进程函数 Ⅰ.…...

编程日记 2025/8/7 1:36:45

【深度学习新浪潮】智能追焦技术全解析：从算法到设备应用

一、智能追焦技术概述智能追焦是基于人工智能和自动化技术的对焦功能，通过深度学习算法识别并持续跟踪移动物体（如人、动物、运动器械等），实时调整焦距以保持主体清晰，显著提升动态场景拍摄成功率。其核心优势包括：精准性：AI 算法优化复杂运动轨迹追踪（如不规则移动…...

编程日记 2025/8/3 4:15:46

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】电商数据分析案例-9.3 商品销售预测模型

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 9.3 商品销售预测模型9.3.1 数据清洗与特征工程9.3.1.1 数据清洗流程1. 缺失值处理2. 异常值检测3. 数据一致性校验 9.3.1.2 特征工程实现1. 时间特征提取2. 用户行为特征3.…...

编程日记 2025/8/3 4:15:42

Docker容器启动失败？无法启动?

Docker容器无法启动的疑难杂症解析与解决方案一、问题现象 Docker容器无法启动是开发者在容器化部署中最常见的故障之一。尽管Docker提供了丰富的调试工具，但问题的根源往往隐藏在复杂的配置、环境依赖或资源限制中。本文将从环境变量配置错误这一细节问题入手&am…...

编程日记 2025/8/3 4:15:40

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】电商数据分析案例-9.4 可视化报告输出

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲电商数据分析实战：基于PostgreSQL的可视化报告生成全流程9.4 可视化报告输出9.4.1 可视化报告设计框架9.4.1.1 报告目标与受众9.4.1.2 数据准备与指标体系 9.4.2…...

编程日记 2025/8/3 6:57:32

字符串---Spring字符串基本处理

一、String类的特性不可变性 String对象一旦创建，内容不可更改，任何修改操作都会生成新对象。字符串常量池字符串字面量（如"abc"）直接存储在常量池中，重复字面量共享同一内存地址。创建方式虽然都是字符…...

编程日记 2025/8/4 21:16:26

车载以太网转USB接口工具选型指南（2025版）

一、车载以太网转USB接口工具的核心需求在新能源汽车研发中，车载以太网与USB接口的转换工具需满足以下核心需求： 物理层兼容性：支持100BASE-T1/1000BASE-T1车载以太网标准，适应车内EMC环境。协议解析能力：支持SOME/…...

编程日记 2025/8/3 6:57:26

响应式的基本实现

Proxy 与属性访问器

Proxy 的工作原理

属性访问器（Getter/Setter）

为什么解构会丢失响应性

ref 和 toRefs 的解决方案

proxyRefs：自动解包 ref

总结

相关文章：