vue3的ref源码解析

news2024/11/26 0:50:18

ref的实现原理

一句话总结: ref本身是个函数,该函数返回一个createRef函数,createRef函数又返回一个“经过类RefImpl实例化”的对象。
详情介绍: ref函数接收我们传入的一个简单类型或复杂类型value,后又将value传递给createRef函数,createRef函数先判断value是不是ref对象,是就直接返回该ref对象,直接结束函数,不是则返回类RefImpl实例化的对象。类RefImpl中接收我们传入的value,在构造函数中对value进行判断,当value是复杂类型时,将使用reactive对value进行响应式,并把返回的值赋值给类RefImpl的公共变量_value。当value是简单类型时,直接将value赋值给类RefImpl的公共变量_value。类RefImpl中还有使用set get关键字方法名为value来定义的getter setter方法,利用getter、setter方法可达到响应式的作用。

  • getter方法
    使用obj.value的方式可访问到getter方法,getter方法除了返回_value值外,还使用了trackRefValue方法收集依赖,那trackRefValue方法是怎么收集依赖的呢?在getter方法中调用trackRefValue方法并把this传过去,this是类Refmpl的实例对象,trackRefValue方法中又调用了trackEffects函数把实例对象的dep变量传过去,后把依赖添加到dep中,其中dep是一个Set类型。
  • setter方法
    使用obj.value设置值时可访问到setter方法,setter方法有一个参数,该参数表示设置的新值newVal,setter方法会先判断新旧值是否有变化,有变化时才去更新"最新的未响应式过的_rawValue和最新的响应式_value的值",这里_value值会先使用toReactive函数过滤一遍,toReactive函数是判断值是复杂类型还是简单类型,是简单类型直接返回,是复杂类型要先reactive响应式过再返回。最后再调用triggerRefValue方法触发依赖,那triggerRefValue方法是怎么触发依赖的呢?getter方法调用triggerRefValue方法时会把this也是实例对象传递过去,triggerRefValue方法接收实例对象后,调用triggerEffects方法把实例对象的dep传进去,然后遍历dep变量调用triggerEffect方法再触发run()方法一起触发所有依赖。

RefImpl类
RefImp类

1、在vue3中ref和reactive有什么不同?
reactive只能对复杂类型进行响应式,因为reactive内部使用的proxy,proxy只能接收复杂类型,ref能对复杂类型和简单类型进行响应式,当数据是复杂类型时,使用reactive进行响应,当数据是简单类型时,使用类的setter getter方法进行响应。

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

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

相关文章

【K8S】二进制安装

常见的K8S安装部署方式 ●Minikube Minikube是一个工具,可以在本地快速运行一个单节点微型K8S,仅用于学习、预览K8S的一些特性使用。 部署地址:https://kubernetes.io/docs/setup/minikube ●Kubeadm☆ Kubeadm也是一个工具,提…

利用Docker容器化构建可移植的分布式应用程序

目录 一、什么是Docker容器化 二、构建可移植的分布式应用程序的优势 三、构建可移植的分布式应用程序的步骤 四、推荐一款软件开发工具 随着云计算和容器化技术的快速发展,将应用程序容器化成为构建可移植的分布式应用程序的一种重要方式。Docker作为目前最为…

批量采集各类自媒体平台内容为word文档带图片软件【支持18家自媒体平台的爬取采集】

批量采集各类自媒体平台内容为word文档带图片软件介绍: 1、支持头条号、大鱼号、企鹅号、一点号、凤凰号、搜狐号、网易号、趣头条、东方号、时间号、惠头条、WiFi万能钥匙、新浪看点、简书、QQ看点、快传号、百家号、微信公众号的文章批量采集为docx文档并带图片。…

c++ Templates:The Complete Guide第二版英文版勘误

看到这里的时候觉得不对劲,一查,果然是写错了,Values应该改成Vs 12.4 Page 204, 12.4.2: s/Values is a nontype template parameter pack.../Vs is a nontype template parameter pack.../Page 204, 12.4.2: s/...provided for the templat…

CSS3设计动画样式

CSS3动画包括过渡动画和关键帧动画,它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块,其中Transform实现对网页对象的变形操作,Transitions实现CSS属性过渡变化,Animations实现…

嵌入式每日500(3)231103 (总线结构,存储器映射,启动配置,FLASH读、写、擦除介绍,CRC校验,选项字节,)

这里写目录标题 1.总线结构2.STM32F072VBT6存储器映射3.启动配置(BOOT0,BOOT1)4.FLASH存储器(读、写、擦除)5.CRC计算单元6.选项字节 1.总线结构 主模块(2个)Cortex-M0内核、DMA通道从模块&…

20.4 OpenSSL 套接字AES加密传输

在读者了解了加密算法的具体使用流程后,那么我们就可以使用这些加密算法对网络中的数据包进行加密处理,加密算法此处我们先采用AES算法,在网络通信中,只需要在发送数据之前对特定字符串进行加密处理,而在接收到数据后在…

【面试经典150 | 链表】随机链表的复制

文章目录 Tag题目来源题目解读解题思路方法一:哈希表递归方法二:哈希表方法三:迭代拆分节点 写在最后 Tag 【递归】【迭代】【链表】 题目来源 138. 随机链表的复制 题目解读 对一个带有随机指向的链表进行深拷贝操作。 解题思路 本题一共…

layui form表单 调整 label 宽度

这个可以调整所有label .layui-form-label {width: 120px !important; } .layui-input-block {margin-left: 150px !important; }情况是这样的&#xff0c;表单里有多个输入框&#xff0c;只有个别label 是长的&#xff0c;我就想调整一下个别长的&#xff0c;其它不变 <di…

小程序day02

目标 WXML模板语法 数据绑定 事件绑定 那麽問題來了&#xff0c;一次點擊會觸發兩個組件事件的話&#xff0c;該怎么阻止事件冒泡呢&#xff1f; 文本框和data的双向绑定 注意点: 只在标签里面用value“{{info}}”&#xff0c;只会是info到文本框的单向绑定&#xff0c;必须在…

1、循环依赖详解(一)

什么是循环依赖&#xff1f; 什么情况下循环依赖可以被处理&#xff1f; Spring是如何解决的循环依赖&#xff1f; 只有在setter方式注入的情况下&#xff0c;循环依赖才能解决&#xff08;错&#xff09; 三级缓存的目的是为了提高效率&#xff08;错&#xff09; 什么是循环…

在基于亚马逊云科技的湖仓一体架构上构建数据血缘的探索和实践

背景介绍 随着大数据技术的进步&#xff0c;企业和组织越来越依赖数据驱动的决策。数据的质量、来源及其流动性因此显得非常关键。数据血缘分析为我们提供了一种追踪数据从起点到终点的方法&#xff0c;有助于理解数据如何被转换和消费&#xff0c;同时对数据治理和合规性起到关…

Ajax学习笔记第8天

放弃该放弃的是无奈&#xff0c;放弃不该放弃的是无能&#xff0c;不放弃该放弃的是无知&#xff0c;不放弃不该放弃的是执着&#xff01; 【1. 聊天室小案例】 文件目录 初始mysql数据库 index.html window.location.assign(url); 触发窗口加载并显示指定的 url的内容 当前…

TSINGSEE青犀特高压输电线可视化智能远程监测监控方案

一、背景需求分析 特高压输电线路周边地形复杂&#xff0c;纵横延伸几十甚至几百千米&#xff0c;并且受所处地理环境和气候影响很大。传统输电线路检查主要依靠维护人员周期性巡视&#xff0c;缺乏一定的时效性&#xff0c;在巡视周期的真空期也不能及时掌握线路走廊外力变化…

AQS面试题总结

一&#xff1a;线程等待唤醒的实现方法 方式一&#xff1a;使用Object中的wait()方法让线程等待&#xff0c;使用Object中的notify()方法唤醒线程 必须都在synchronized同步代码块内使用&#xff0c;调用wait&#xff0c;notify是锁定的对象&#xff1b; notify必须在wait后执…

振弦式传感器读数模块VM5系列介绍

VM5系列是专门针对单线圈式振弦传感器研发&#xff0c;可完成传感器的线圈激励、频率读数、温度测量等工作&#xff0c;具有标准的 UART&#xff08;TTL/RS232/RS485&#xff09;和 IIC 数字接口、模拟量输出接口&#xff08;电压或电流&#xff09;&#xff0c;通过数字接口数…

【论文阅读笔记】GLM-130B: AN OPEN BILINGUAL PRE-TRAINEDMODEL

Glm-130b:开放式双语预训练模型 摘要 我们介绍了GLM-130B&#xff0c;一个具有1300亿个参数的双语(英语和汉语)预训练语言模型。这是一个至少与GPT-3(达芬奇)一样好的100b规模模型的开源尝试&#xff0c;并揭示了如何成功地对这种规模的模型进行预训练。在这一过程中&#xff0…

arcgis图上添加发光效果!

看完本文, 你可以不借助外部图片素材, 让你的图纸符号表达出你想要的光! 我们以之前的某个项目图纸为例,来介绍下让符号发光的技术! 第一步—底图整理 准备好栅格影像底图、行政边界的矢量数据,确保“数据合适、位置正确、边界吻合”。 确定好图纸的大小、出图比例、投…

食品企业数字孪生可视化管理平台,实现智慧轻工业高质量发展

如今&#xff0c;数字技术正在打破传统食品产业的边界&#xff0c;随着食品加工产业链不断进化为智慧体&#xff0c;数字孪生技术已经成了食品行业数字进阶的重要抓手。食品加工数字孪生工厂&#xff0c;通过应用数字孪生技术&#xff0c;将食品加工工厂的自动化生产线全过程进…

浏览器哪家强——PC端篇

今天的分享将围绕一个大家再熟悉不过的名称展开——浏览器。 根据百科给出的解释&#xff1a;浏览器是用来检索、展示以及传递Web信息资源的应用程序。通俗的说&#xff0c;浏览器就是一种阅读工具&#xff0c;类似记事本、word、wps&#xff0c;只不过后者阅读的是文本文档&am…