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
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51406.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka知识总结(事务+数据存储+请求模型+常见场景)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 事务 事务Producer保证消息写入分区的原子性&#xff0c;即这批消…

flask和python,navicat实现数据库和python的结合

app.py import pymysql from flask import Flask, render_template, requestapp Flask(__name__)app.route(/add/user, methods["GET", "POST"]) def add_user():if request.method "GET":return render_template(add_user.html) # 修正模板…

C语言 ——— 指针和字符数组的相关笔试题和解析(上篇)

目录 字符数组和指针的笔试题&#xff08;sizeof篇&#xff09; 字符数组和指针的笔试题&#xff08;strlen篇&#xff09; 字符数组和指针的笔试题&#xff08;sizeof篇&#xff09; 1. char arr[] { a, b, c, d, e, f }; printf("%d\n", sizeof(arr)); 首先要…

国内本地化OCSP服务的SSL证书:提升安全与效率的新选择

在数字化时代&#xff0c;网络安全成为企业运营和用户体验的重要基石。HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;作为一种安全的网络协议&#xff0c;通过SSL&#xff08;Secure Sockets Layer&#xff09;加密技术&#xff0c;保障了数据传输的机密性…

Windows 端口占用 Port 端口占用 如何发现端口占用并且强杀?

应用场景 场景 有时候本地测试&#xff0c;经常发现端口占用。 如何找到端口占用&#xff0c;并且 kill 掉呢&#xff1f; 端口占用情况 lsof -i:XXX查看 sudo netstat -apn | grep XXX查看 ps -aux | grep XXX详细信息 ps -ef | grep XXX根据分类条件查询信息 发现并…

MATLAB基础应用精讲-【数模应用】Poisson 回归分析(附R语言代码实现)

目录 前言 知识储备 基于泊松回归、负二项回归模型 数据分布介绍 模型介绍 模型的选择 案例介绍 算法原理 泊松回归 数学模型 适用条件 参数估计与假设检验 SPSSAU Poisson 回归案例 1、背景 2、理论 3、操作 4、SPSSAU输出结果 5、文字分析 6、剖析 疑难解…

OpenSSL SSL_connect: Connection was reset in connection to github.com:443

OpenSSL SSL_connect: Connection was reset in connection to github.com:443 目录 OpenSSL SSL_connect: Connection was reset in connection to github.com:443 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&…

kuberneter管理GUI工具Lens

从github上可以知道&#xff0c;lens的前端是用electron做的客户端工具&#xff0c;打开安装路径你会发现kubectl.exe,没错&#xff0c;就是你经常用的kubectl命令行的客户端工具。kubectl本来就能输出json的数据类型&#xff0c;集成前端更方便了。看到这里你是不是发现&#…

前端Long类型精度丢失:后端处理策略

文章目录 精度丢失的具体原因解决方法1. 使用 JsonSerialize 和 ToStringSerializer2. 使用 JsonFormat 注解3. 全局配置解决方案 结论 开发商城管理系统的品牌管理界面时&#xff0c;发现一个问题&#xff0c;接口返回品牌Id和页面展示的品牌Id不一致&#xff0c;如接口返回的…

Transformer--输入部分

&#x1f3f7;️上文我们简单介绍了Transformer模型的总体架构&#xff0c;本章我们主要介绍其输入部分 &#x1f4d6;前言 &#x1f4d6;文本嵌入层的作用 &#x1f4d6;位置编码器的作用 &#x1f4d6;前言 输入部分主要包括源文本嵌入层以及位置编码器&#xff0c;目标文本…

HX1838红外接收模块-红外遥控(外部中断+状态机)

目录 红外遥控 模块介绍 HX1838红外接收二极管 红外发射遥控器 遥控器键码 模块接线 NEC协议编码 状态机分析 驱动代码 IR.h IR.c main.c 红外遥控 红外遥控是利用红外光进行通信的设备&#xff0c;由红外LED将调制后的信号发出&#xff0c;由专用的红外接收头进行…

Unity + Hybridclr + Addressable + 微信小程序 热更新报错

报错时机&#xff1a; Generate All 怎么All 死活就是报错 生成微信小程序&#xff0c;并启动后 报错内容&#xff1a; MissingMethodException:AoT generic method notinstantiated in aot.assembly:Unity.ResourceManager:dll, 原因&#xff1a; Hybridclr 开发文档 解…

使用 Baklib 构建多语言知识库

技术的快速发展使企业能够更轻松地走向全球。在国外市场寻找新机会的关键方面之一是了解并与新客户群互动。此外&#xff0c;如果您在特定人群中拥有任何现有客户&#xff0c;那么让您的企业网站和支持也以他们可以参与的语言提供是合乎逻辑的。 假设您的公司以英语为主导市场…

SSL/TLS和SSL VPN

1、SSL/TLS SSL安全套接字层&#xff1a;是一种加密协议&#xff0c;用于在网络通信中建立安全连接。它在应用层和传输层&#xff08;TCP/IP&#xff09;之间提供数据加密、服务器身份验证以及信息完整性验证 SSL只保护TCP流量&#xff0c;不保护UDP协议 TLS&#xff1a;传输层…

GORM:优雅的Go语言ORM库

文章目录 引言GORM原理基础使用安装GORM定义模型连接数据库CRUD操作 高级使用关联事务回调 优点结论 引言 在Go语言开发中&#xff0c;数据库操作是不可或缺的一部分。虽然直接使用SQL语句可以灵活地与数据库交互&#xff0c;但随着项目规模的扩大&#xff0c;SQL语句的编写、…

成为git砖家(4): git status 命令简介

1. untracked 和 tracked 状态 Remember that each file in your working directory can be in one of two states: tracked or untracked. Tracked files are files that were in the last snapshot, as well as any newly staged files; they can be unmodified, modified, o…

华为od-开发-终端云面试总结

华为OD - 终端云 资面 主要问一些在校经历&#xff0c;做过那些项目&#xff0c;大学期间觉得做过的最有价值的事情&#xff0c;大学期间令你感到最有成就感的事情&#xff0c;期望薪资。 技术一面&#xff08;1h20min&#xff09;7.18 1、项目里使用到RPC去取代HTTP&#x…

Nginx周末部署

背景 Nginx是本人学习的一类中间件&#xff0c;上次完成了vue的搭建&#xff0c;所以顺便把项目加入Nginx吧 1. 镜像拉取与测试 查询dockerHub&#xff0c;选择最新最稳定的版本 docker pull nginx:stable-perl 执行下载 docker run -d --name mynginx -p 8080:80 -v D:\IM…

基于bert的自动对对联系统

目录 概述 演示效果 核心逻辑 使用方式 1.裁剪数据集 根据自己的需要选择 2.用couplet数据集训练模型 模型存储在model文件夹中 3.将模型转换为ONNX格式 4.打开index.html就可以在前端使用此自动对对联系统了。 本文所涉及所有资源均在传知代码平台可获取。 概述 这个生成器利用…

【Python检查两个列表是不是有重复项有关案例】

以下是一些具体的例子&#xff0c;展示了如何使用不同的方法来检查两个列表是否有重复项&#xff1a; 例子1&#xff1a;使用集合 list1 [1, 2, 3, 4, 5] list2 [4, 5, 6, 7, 8]# 转换为集合并求交集 duplicates list(set(list1) & set(list2))if duplicates:print(&q…