vue3的ref源码解析

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.hqwc.cn/news/157902.html

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

相关文章

postman接口测试—Restful接口开发与测试

开发完接口,接下来我们需要对我们开发的接口进行测试。接口测试的方法比较多,使用接口工具或者Python来测试都可以,工具方面比如之前我们学习过的Postman或者Jmeter ,Python脚本测试可以使用Requests unittest来测试。 测试思路…

webpack 高级

高级配置就是要进行 webpack 优化,让代码在编译、运行时性能更好 主要从以下角度去优化: 1、提升开发体验 2、提升打包构建速度 3、减少代码体积 4、优化代码运行性能 一、提升体验 1、SourceMap 为什么 打包出来的所有css和js合并成了一个文件&#…

“排队领奖,购物狂欢!开启全新商业模式

欢迎来到这个充满惊喜的商业模式——工会排队奖励模式!在这个时代,你是否感到购物和消费的乐趣被平淡无奇的模式所限制?那么,这个全新的商业模式将带你进入一个充满刺激和惊喜的世界! 想象一下,当你购物时&…

Panda3d 相机控制

Panda3d 相机控制 文章目录 Panda3d 相机控制Panda3d中的透视镜头和垂直镜头透视镜头垂直镜头 Panda3d 中用代码控制相机的移动用键盘控制相机的移动用鼠标控制相机的移动 Panda3d 把相机也当做是一个 PandaNode,因此可以向操作其他节点对其进行操作。 真正的相机是…

ChatGPT火了:还有哪些可以做的变现项目

一、写在前面 柴特鸡皮踢 大家都不陌生了 说实话,Chatgpt火了后,正经的项目没出来多少,出了一大批割九菜的。 为什么说是割韭菜,因为一群完全不懂技术,只会讲讲成功学、写作学、财经的大V也敢开社群、卖课。很多人听…

【GitLab CI/CD、SpringBoot、Docker】GitLab CI/CD 部署SpringBoot应用,部署方式Docker

介绍 本文件主要介绍如何将SpringBoot应用使用Docker方式部署,并用Gitlab CI/CD进行构建和部署。 环境准备 已安装Gitlab仓库已安装Gitlab Runner,并已注册到Gitlab和已实现基础的CI/CD使用创建Docker Hub仓库,教程中使用的是阿里云的Docker…

【java学习—十一】泛型(1)

文章目录 1. 为什么要有泛型Generic2. 泛型怎么用2.1. 泛型类2.2. 泛型接口2.3. 泛型方法 3. 泛型通配符3.1. 通配符3.2. 有限制的通配符 1. 为什么要有泛型Generic 泛型,JDK1.5新加入的,解决数据类型的安全性问题,其主要原理是在类声明时通过…

Python 内嵌函数:它们有什么用处?

目录 创建 Python 内部函数使用内部函数:基础知识 提供封装构建助手内部函数使用内部辅助函数与私有辅助函数使用内部函数保留状态:闭包 在闭包中保留状态修改关闭状态使用内部函数添加行为:装饰器结论 一、说明 内部函数,也称为嵌…

rfsoc FPGA 49DR 16收16发模块

前面简单介绍过RFSOC板卡 https://blog.csdn.net/jingjiankai5228/article/details/114734631 整体来说RFSOC降低了传统AD DA软硬件开发难度,但是同样存在整数点FS/N谐波大的问题 交织采样是通过多个AD拼接完成的,所以校准比较关键,和以前常…

Cesium:CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再转换到笛卡尔坐标系的xyz坐标

作者:CSDN @ _乐多_ 本文将介绍使用 Vue 、cesium、proj4 框架,实现将CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再将WGS84坐标系的经纬高度转换到笛卡尔坐标系的xyz坐标的代码。并将输入和输出使用 Vue 前端框架展示了出来。代码即插即用。 网页效果如下图所示…

【ETL工具】Datax-ETL-SqlServerToHDFS

🦄 个人主页——🎐个人主页 🎐✨🍁 🪁🍁🪁🍁🪁🍁🪁🍁 感谢点赞和关注 ,每天进步一点点!加油!&…

论坛搭建.

目录 一.配置软件仓库 二.安装http php miriadb 三.配置数据库 四.源码拖拽并解压 五.防火墙通过 六.浏览器安装测试 七.界面参数设置 一.配置软件仓库 1.进入仓库目录 cd /etc/yum.repos.d 2.创建仓库文件 vim local.repo 3.在 local.repo中写入:(粘贴的时候注意位…