vue3的ref源码解析

news/2024/7/10 0:24:54 标签: vue.js, 前端, javascript, vue

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.niftyadmin.cn/n/5144789.html

相关文章

Linux学习笔记之一(计算机网络基础)

Linux learning note 1、计算机网络1.1、IP地址和MAC地址1.2、NAT、端口1.3、动态IP、静态IP、DHCP1.4、子网掩码、网关地址、DNS服务器1.5、TCP、UDP、ftp、http 2、虚拟机的网络管理2.1、桥接模式2.2、NAT模式2.3、仅主机模式2.4、总结 1、计算机网络 1.1、IP地址和MAC地址 …

网络安全进阶学习第二十一课——XML介绍

文章目录 一、XML简介二、XML文档结构1、XML文档结构包括2、XML树结构 三、XML语法1、声明信息,用于描述xml的版本和编码方式2、XML有且只有一个根元素3、成对标签(即标签必须关闭,html可以不关闭也能运行)4、区分大小写5、不可交…

Learning to Segment Rigid Motions from Two Frames 代码复现

环境配置 https://github.com/gengshan-y/rigidmask 1.拉取代码 git clone https://github.com/gengshan-y/rigidmask.git cd rigidmask2.创建conda环境,修改rigidmask.yml name: rigidmask channels:- pytorch- pytorch3d- conda-forge- defaults dependencies…

fastadmin vue前端设值php后端取值

前段时间做一个电商系统,前后端分离,前端用vue3写的,主要发布在手机端,叫uniapp的框架 这几年国内比较流行的框架。后端用fastadmin搭建,用php开发的,以插件显示开发,商城版本 叫shopro的&#…

计算机视觉任务图像预处理之去除图像中的背景区域-------使用连通域分析算法(包含完整代码)

原理 通过连通域分析算法能够找到最大的连通域,即图片的主体部分,然后保存该连通域的最小外接矩阵,即可去除掉无关的背景区域 代码 使用连通域分析算法去除图像中的空白部分 并将图像变为统一大小的正方形 from skimage import measure imp…

rosbag 的常用命令

文章目录 1、录制数据包2、查看数据包信息3、数据包播放4、数据包过滤5、切割数据包 1、录制数据包 // cd到目标文件夹下 rosbag record –a // 录制所有topic的数据包,不光包括正在播的bag里有的 rosbag record /topic_a /topic_2 // 录制topic_1/topic_2的数据包 rosb…

CM3D2 汉化杂记

老物难找资源,于是尝试自己汉化,皆源于有一个好的汉化插件。 资源:LMMT 工具:CM3D2.SubtitleDumper.exe,有道翻译(可以翻译文档),Libreoffice(文档、表格) cmd(资源管理器的结果可以拖进去&…

2024年天津医科大学临床医学院专升本招生对口专业限制专科目录

2024年天津医科大学临床医学院高职升本科招生对口专业目录 药学: 药学 护理: 护理、助产 公共事业管理: 医药卫生大类:护理、助产、临床医学、口腔医学、中医学、中医骨伤、针灸推拿、蒙医学、藏医学、维医学、傣医学、哈医学…