vue Ref 和 Reactive 原理解析
文章目录
- Ref
- Reactive
Ref
- ref 的语义是指向一个值的引用,主要用于处理基本数据类型和单一值对象,即对值的引用进行包装和管理,而不是对对象的操作进行拦截,对于基础类型通过 getter 和 setter 实现拦截
- 使用 Proxy 拦截对象的所有操作(如 get、set、deleteProperty 等),这是一个强大的 API,但同时也带来一定的性能开销。对于基础的响应式处理,使用 Proxy 显得过于繁重
- ref 更适合用于单一值的场景,它的设计初衷就是为了处理这些简单情况,通过 getter 和 setter 可以更简洁地实现响应式
- 但是如果 ref 在处理对象时,会将对象转换为响应式对象。这种转换实际上是通过 reactive 实现的,即在 ref 中如果传递的是对象类型,最终会使用 Proxy 来实现响应式功能。
export function ref(value?: unknown) {return createRef(value, false);
}function createRef(rawValue: unknown, shallow: boolean) {if (isRef(rawValue)) {return rawValue;}return new RefImpl(rawValue, shallow);
}class RefImpl<T> {private _value: T;private _rawValue: T;constructor(value: T, public readonly __v_isShallow: boolean) {this._rawValue = value;this._value = __v_isShallow ? value : toReactive(value);}get value() {trackRefValue(this);return this._value;}set value(newVal) {if (hasChanged(newVal, this._rawValue)) {this._rawValue = newVal;this._value = toReactive(newVal);triggerRefValue(this);}}
}// 判断 ref 的引用值是否是对象
function toReactive(value: any): any {return isObject(value) ? reactive(value) : value;
}
Reactive
- reactive 主要用于将复杂对象变成响应式对象,这些对象可能包含嵌套的结构。对于这种情况,Proxy 是更合适的工具,因为它能够拦截和处理对象的所有操作,确保对象及其嵌套结构的每个部分都是响应式的
export function reactive(target: object) {if (isReadonly(target)) {return target;}return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);
}function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandler<any>,collectionHandlers: ProxyHandler<any>
) {if (!isObject(target)) {if (__DEV__) {console.warn(`value cannot be made reactive: ${String(target)}`);}return target;}const proxy = new Proxy(target,collectionType ? collectionHandlers : baseHandlers);return proxy;
}export const mutableHandlers: ProxyHandler<object> = {get,set,deleteProperty,has,ownKeys
};
相关文章:
vue Ref 和 Reactive 原理解析
文章目录 RefReactive Ref ref 的语义是指向一个值的引用,主要用于处理基本数据类型和单一值对象,即对值的引用进行包装和管理,而不是对对象的操作进行拦截,对于基础类型通过 getter 和 setter 实现拦截使用 Proxy 拦截对象的所有…...

【人工智能】Transformers之Pipeline(六):图像分类(image-classification)
目录 一、引言 二、图像分类(image-classification) 2.1 概述 2.2 技术原理 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipeline&#x…...
编程语言漫谈之「初始化与赋值」——以C++和汇编语言为示例
编程语言漫谈之「初始化与赋值」——以C和汇编语言为示例 1. 赋值时汇编做了什么2. 在变量定义时做初始化, 与在使用时才进行初始化, 有区别吗? 1. 赋值时汇编做了什么 当我们在C中写下如下代码: int main() {int a 10;return 0; }这是一个简单的整数类型变量a的初始化赋值…...
windows使用ssh-agent管理私钥
主要有以下几个方面: 开启openssh 的 ssh-agent 服务 打开powershell 输入 Get-Service -Name ssh-agent 查看服务是否起来Start-Service ssh-agent 启动服务Stop-Service ssh-agent 关闭服务将私钥添加到ssh-agent 添加私钥 ssh-add ~/.ssh/id_rsa查询添加哪些私钥 ssh-add -…...
PostgreSQL 之 to_timestamp函数
to_timestamp 是 PostgreSQL 中的一个函数,用于将字符串或数字转换为时间戳。以下是关于 to_timestamp 的详细介绍: 引入版本 to_timestamp 函数在 PostgreSQL 7.3 版本中引入。 语法 to_timestamp 有两种主要的用法: 1.将字符串转换为时间戳 to_timestamp(text, text)第…...

USB3.0的等长要求到底是多少?
USB2.0与USB3.0接口的PCB布局布线要求PCB资源PCB联盟网 - Powered by Discuz! (pcbbar.com) 90欧姆阻抗,走差分线: 重点来了:...

力扣高频SQL 50题(基础版)第二十五题
文章目录 力扣高频SQL 50题(基础版)第二十五题619.只出现一次的最大数字题目说明实现过程准备数据实现方式结果截图 力扣高频SQL 50题(基础版)第二十五题 619.只出现一次的最大数字 题目说明 MyNumbers 表: ------…...

【C++题解】1581. 马里奥的银币1
问题:1581. 马里奥的银币1 类型:数组找数 题目描述: 马里奥有很多银币,有一天他得到了一张魔法卡,只要使用这张魔法卡,就可以使得他的银币里面的最大的银币金额变得更大。如果他最大的银币是偶数的金额&a…...
system和popen函数的异同点
system和popen函数的异同点 文章目录 system和popen函数的异同点1.什么是shell命令2.system 函数3.popen 函数4.总结 1.什么是shell命令 Shell 命令是在类 UNIX 操作系统(包括 UNIX、Linux 和 macOS 等)的 Shell 中执行的指令。Shell 是操作系统的命令行…...

Python小工具之httpstat网络分析
一、简介 Python httpstat是一个基于Python的命令行工具,用于测量HTTP请求的性能和状态信息。它能够向目标服务器发送HTTP请求,并显示详细的统计信息,包括DNS解析时间、建立连接时间、TLS/SSL握手时间、首字节时间、总时间等。这些信息对于排…...

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归
挑战房市预测领头羊(KNN,决策树,线性回归) 1. 介绍1.1 K最近邻(KNN):与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树:解码房价的逻辑树1.2.1 决策树的…...
Docker 基础知识
Docker 基础知识 什么是 Docker? Docker 是一个开源平台,用于开发、发布和运行应用程序。Docker 通过将应用程序及其依赖项打包到一个称为容器的可移植单元中来工作。 Docker 的核心组件是什么? Docker Engine:核心组件࿰…...

视频主题Qinmei 3.0视频站源码_WordPress影视视频主题/附详细安装教程
Qinmei 3.0主题主要是将 wordpress 改造成纯 api 的站点,以便实现前后端分离的技术栈,目前的进度已经大致完成,唯一的问题就是需要安装 JWT token 插件。 功能介绍: 支持豆瓣以及 bangumi 的一键获取信息, 豆瓣 api 目前使用的是…...

数字看板:跨行业需求下的创新与升级
在当今这个数据驱动的时代,数字看板作为信息展示与决策支持的重要工具,正逐步渗透到各行各业之中。从智慧城市到智能制造,从金融分析到医疗健康,数字看板以其直观、动态、高效的特点,成为了连接数据与决策者的桥梁。本…...

02、爬虫数据解析-Re解析
数据解析的目的是不拿到页面的全部内容,只拿到部分我们想要的内容内容。 Re解析就是正则解析,效率高准确性高。学习本节内容前需要学会基础的正则表达式。 一、正则匹配规则 1、常用元字符 . 匹配除换行符以外的字符 \w 匹配字母或数字或下划…...

掀桌子了!原来是咱们的大屏设计太酷,吓着前端开发老铁了
掀桌子了!原来是咱们的大屏设计太酷,吓着前端开发老铁了 艾斯视觉观点认为:在软件开发的世界里,有时候创意和设计的火花会擦得特别亮,以至于让技术实现的伙伴们感到既兴奋又紧张。这不,我们的设计团队刚刚…...
JavaScriptfor循环的树形菜单栏·
在此声明一下嗷兄弟闷儿!我没写样式纯粹是console.log()打印控制面板的! 全局声明一个data; let data; 然后去获取到json的假数据 let xhr new XMLHttpRequest(); // 设置请求方式和请求地址 xhr.open(get, ./js/menu.json, true); // 发…...
easyExcel 3.x以上版本导入数据后,再把错误信息导出,外加自定义RGB背景色、行高、宽度等
easyExcel 3.x以上版本导入数据后,再把错误信息导出,外加自定义RGB背景色 背景 由于项目中用的easypoi导入的数据量大了,会导致OOM的问题,所以要求更换为easyExcel框架做导入。话不多说,这里只做一个导入的示例&…...
React的img图片路径怎么写
在React中,图片路径的写法取决于你的图片资源是如何被管理和存放的。这里有几种常见的情况和对应的写法: 1. 图片作为React组件的静态资源 如果你的图片文件放在React项目的public文件夹下(这是Create React App项目的默认结构)…...

UGUI优化篇--UGUI合批
UGUI合批 UGUI合批规则概述UGUI性能查看工具合批部分的特殊例子一个白色image、蓝色image覆盖了Text,白色image和Text哪个先渲染 Mask合批Mask为什么会产生两个drawcallMask为什么不能合批Mask注意要点 RectMask2D为什么RecMask2D比Mask性能更好主要代码RectMask2D注…...

Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...

visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...

大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...