vue3 reactive响应式实现源码

Vue 3 的 reactive 是基于 JavaScript 的 Proxy 实现的,因此它通过代理机制来拦截对象的操作,从而实现响应式数据的追踪。下面是 Vue 3 的 reactive 源码简化版。

Vue 3 reactive 源码简化版

首先,我们需要了解 reactive 是如何工作的,核心的功能是使用 Proxy 来代理对象并处理对象的读取和修改。

// reactive.js
export function reactive(target) {// 检查 target 是否是对象if (typeof target !== 'object' || target === null) {return target;}// 使用 Proxy 来代理对象的读取和设置操作return new Proxy(target, {get(target, prop, receiver) {// 当访问对象的属性时,执行 getter// 可以在此处添加追踪操作,比如收集依赖console.log(`Getting ${String(prop)}:`, target[prop]);return target[prop];},set(target, prop, value, receiver) {// 当设置对象的属性时,执行 setter// 可以在此处添加更新操作,比如通知视图更新console.log(`Setting ${String(prop)} to:`, value);target[prop] = value;// 返回 true 表示修改成功return true;}});
}

关键点解释

  • ProxyProxy 是 JavaScript 的一项新特性,它允许我们定义自定义的行为来拦截对象的基本操作(如读取、写入、删除等)。在 reactive 的实现中,Proxy 拦截了对象的 getset 操作。

  • get:当访问对象的某个属性时,会触发 get 方法。在 get 方法中,我们通常会做两件事:

    • 追踪依赖:在 Vue 中,通常会使用依赖收集来追踪视图中对数据的引用。
    • 返回属性值:最终返回目标对象的属性值。
  • set:当设置对象的某个属性时,会触发 set 方法。在 set 方法中,我们通常会做以下几件事:

    • 修改目标对象的属性值。
    • 通知视图或其他相关部分进行更新。

完整实现(简化版)

下面是一个简化版的 Vue 3 reactive 源码,它展示了如何通过 Proxy 来实现响应式。

// reactive.js
function reactive(target) {if (typeof target !== 'object' || target === null) {return target;}const handler = {get(target, prop, receiver) {// 在这里,通常会收集依赖项// 例如,Vue 通过某种方式追踪当前访问的属性console.log(`Getting ${String(prop)}:`, target[prop]);return target[prop];},set(target, prop, value, receiver) {// 在这里,可以触发视图更新的机制console.log(`Setting ${String(prop)} to:`, value);target[prop] = value;// 返回 true,表示操作成功return true;}};return new Proxy(target, handler);
}// 使用例子
const state = reactive({count: 0,user: { name: 'John' }
});state.count = 1;  // 输出: Setting count to: 1
console.log(state.count);  // 输出: Getting count: 1

Vue 3 实现中的关键点

在 Vue 3 中,reactive 会结合 Vue 的内部系统来做更复杂的事情,比如:

  1. 依赖收集:当属性被读取时,Vue 会通过 get 拦截器收集依赖。这意味着,只有当属性真正被访问时,相关组件才会注册为该属性的依赖。

  2. 视图更新:当数据发生变化时,set 方法会触发视图更新,通常是通过通知渲染函数重新执行来实现的。

  3. 嵌套对象的响应式:当你访问一个对象的属性时,Vue 会递归地将嵌套对象也变成响应式对象。

完整版源码(源码中包含 Vue 的依赖管理和优化)

如果你想查看 Vue 3 reactive 和其他响应式 API(如 ref)的完整实现,可以参考 Vue 3 的源码库,具体代码位于 packages/reactivity 文件夹下。

你可以从 Vue 3 GitHub 仓库 下载完整的源码。

具体的 reactive 实现代码会涉及更多的优化和功能,比如依赖追踪、缓存、代理标识符等复杂逻辑,建议直接查看 Vue 3 的源码进行深入学习。

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

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

相关文章

scala模式匹配

object test47 {def main(args: Array[String]): Unit {val id"445646546548858548648"//取出id前两位val provinceid.substring(0,2) // println(province) // if (province"42"){ // println("湖北") // }else if(province&quo…

旋转磁体产生的场 - 实验视频资源下载

先发几个视频,是2019年所作的实验内容 更多视频,到某宝找我吧。注意:是收费的。 20190312-180244-旋转磁体产生的场造成激光功率减小 https://download.csdn.net/download/u014161757/90038058 20190313-090956-旋转磁体产生的场对真空介电…

AI加持,华为全屋智能品牌升级为“鸿蒙智家”

1.传统智能家居的困境:从便利到繁琐 近年来,智能家居因其便捷性和科技感受到消费者的青睐。然而,随着用户需求的多样化,传统智能家居的弊端逐渐显现: 设备连接复杂,品牌间兼容性不足,用户不得不…

【后端面试总结】MySQL索引

数据库索引不只一种实现方法,但是其中最具代表性,也是我们面试中遇到最多的无疑是B树。 索引为什么选择B树 数据量很大的查找,是不能直接放入内存的,而是需要什么数据就通过磁盘IO去获得。 红黑树,AVL树等二叉查找树…

ASP.net WebAPI 上传图片实例(保存显示随机文件名)

[HttpPost]public Task<Hashtable> ImgUpload(){// 检查是否是 multipart/form-dataif (!Request.Content.IsMimeMultipartContent("form-data"))throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);//文件保存目录路径string SaveTempPat…

string类部分(C++)

目录 1. string类 1.1 auto和范围for auto关键词&#xff1a; 范围for&#xff1a; 1.2 string类的常用接口说明 a&#xff09;string类对象的常见构造 b&#xff09; string类对象的容量操作 size与length&#xff1a; capacity: empty: clear: reserve: 1.reserve&am…

Oracle RAC 环境下数据文件误建在本地目录的处理过程

问题描述 在 Oracle RAC 环境中&#xff0c;有时会误将数据文件创建在本地目录&#xff0c;导致其他节点无法访问该数据文件&#xff0c;从而报出 ORA-01157 和 ORA-01110 错误。 问题分析 错误日志 Mon Nov 16 19:02:38 2021 Errors in file /u01/app/oracle/diag/rdbms/orc…

大厂也在用的分布式链路追踪:TraceIdFilter + MDC + Skywalking

痛点 查线上日志时&#xff0c;同一个 Pod 内多线程日志交错&#xff0c;很难追踪每个请求对应的日志信息。 日志收集工具将多个 Pod 的日志收集到同一个数据库中后&#xff0c;情况就更加混乱不堪了。 解决 TraceId MDC 前端每次请求时&#xff0c;添加 X-App-Trace-Id 请…

Dashboard Tactics

1&#xff1a;相关链接Dashboard Tactics :: OpenCPN Dashboard Tactics Plugin rgleason/dashboard_tactics_pi: OpenCPN dashboard built-in plugin merger with external tactics_pi plugin NMEAconverter :: OpenCPN 2&#xff1a;显示样式 3&#xff1a;代码 这个插件…

【leetcode】动态规划

31. 873. 最长的斐波那契子序列的长度 题目&#xff1a; 如果序列 X_1, X_2, ..., X_n 满足下列条件&#xff0c;就说它是 斐波那契式 的&#xff1a; n > 3对于所有 i 2 < n&#xff0c;都有 X_i X_{i1} X_{i2} 给定一个严格递增的正整数数组形成序列 arr &#xff0…

24.11.26 Mybatis2

resultMap 中的标签和属性 如果是主键列 一般用id标签对应 propertyjava对象的属性 column 数据库中的列( javaType实体类数据类型 jdbcType数据库列的数据类型 ) 不需要配置 <id property"empno" column"empno" />如果是普通列 一般用result对…

第六届国际科技创新学术交流大会暨新能源科学与电力工程国际(NESEE 2024)

重要信息 会议官网&#xff1a;nesee.iaecst.org 会议时间&#xff1a;2024年12月6-8日 会议地点&#xff1a; 中国-广州&#xff08;越秀国际会议中心) 大会简介 新能源科学与电力工程国际学术会议&#xff08;NESEE 2024&#xff09;作为第六届国际科技创新学术交流大会分…

随笔20241126 Kafka 消费者的自动提交与手动提交偏移量详解

Kafka 是一种流行的分布式消息系统&#xff0c;用于处理大量实时数据。消费者在消费消息时&#xff0c;需要跟踪其消费的位置&#xff08;即偏移量&#xff0c;offset&#xff09;。对于 Kafka 消费者来说&#xff0c;偏移量的提交是至关重要的&#xff0c;因为它决定了消费者在…

Vue.js 指令详解:v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model

Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;它通过一系列的指令来实现数据与 DOM 的绑定。在本篇博客中&#xff0c;我们将通过一个示例来介绍 Vue 3 中的一些常用指令&#xff1a;v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model。 1. v-bind…

【es6】原生js在页面上画矩形添加选中状态高亮及显示调整大小控制框(三)

接上篇文章&#xff0c;这篇实现下选中当前元素显示调整大小的控制框&#xff0c;点击document取消元素的选中高亮状态效果。 实现效果 代码逻辑 动态生成控制按钮矩形,并设置响应的css // 动态添加一个调整位置的按钮addScaleBtn(target) {const w target.offsetWidth;con…

文心一言与千帆大模型平台的区别:探索百度AI生态的双子星

随着人工智能技术的迅猛发展&#xff0c;越来越多的公司开始投入资源开发自己的AI解决方案。在中国&#xff0c;百度作为互联网巨头之一&#xff0c;不仅在搜索引擎领域占据重要位置&#xff0c;还在AI领域取得了显著成就。其中&#xff0c;“文心一言”和“千帆大模型平台”便…

【西瓜书】神经网络-MP神经元、感知机和多层网络

神经网络&#xff08;neural networks&#xff09;的定义&#xff1a;神经网络是由具有适应性的简单单元组成的广泛并行互联的网络&#xff0c;它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。&#xff08;T. Kohonen 1988年在Neural Networks创刊号上给出的定义…

Java的日期和时间的格式化

目录 引言 使用SimpleDateFormat 使用DateTimeFormatter 格式化模式 注意事项 引言 在Java中&#xff0c;日期和时间的格式化是通过java.text.SimpleDateFormat类或更现代的java.time.format.DateTimeFormatter类来实现的。随着Java 8的发布&#xff0c;推荐使用java.time…

Linux进程与资源管理

在Linux学习&#xff0c;进行各种操作过程中需要用到很多种命令&#xff0c;本篇主要讲Linux进程与资源管理命令仅供大家参考。绝对是干货满满的一篇文章&#xff01;&#xff01;&#xff01; Linux进程与资源管理命令&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&am…

《基于FPGA的便携式PWM方波信号发生器》论文分析(三)——数码管稳定显示与系统调试

一、论文概述 基于FPGA的便携式PWM方波信号发生器是一篇由任青颖、庹忠曜、黄洵桢、李智禺和张贤宇 等人发表的一篇期刊论文。该论文主要研究了一种新型的信号发生器&#xff0c;旨在解决传统PWM信号发生器在移动设备信号调控中存在的精准度低和便携性差的问题 。其基于现场可编…