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 的源码进行深入学习。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

漫谈 module caching——PyCharm jupyter notebook 在导入模块被更新后无法及时同步问题

目录 引子:问题的发现何为 module caching见微知著:Python 中的缓存机制参考链接 引子:问题的发现 近日笔者用 PyCharm 创建了一个项目时不经意间发现了这个问题:事情发生在调试 Jupyter Notebook 的过程中。当笔者修改了自己编写…

企业数字化转型现状

国家数字经济战略背景 2018年以来,国家政府不断出台政策规范我国企业数字化治理市场。2018年9月颁布《关于发展数字经济稳定并扩大就业的指导意见》,支持建设一批数字经济创新创业孵化机构。积极推进供应链创新与应用,支持构建以企业为主导。…

《Python基础》之算数、比较、赋值、逻辑、位运算符

目录 简介 Python中常见的运算符 1、算数运算符 2、比较运算符 3、赋值运算符 4、逻辑运算符 5、位运算符 总结 简介 Python 提供了多种运算符,用于执行各种操作,包括算术运算、比较运算、逻辑运算、位运算、赋值运算等。以下是 Python 中常用的…

学习threejs,使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.MeshPhongMaterial高…

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点:仅考虑所给样例,会误以为H和W两人的装车时间是一一对应的,那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…

道品智能科技移动式水肥一体机:农业灌溉施肥的革新之选

在现代农业的发展进程中,科技的力量正日益凸显。其中,移动式水肥一体机以其独特的可移动性、智能化以及实现水肥一体化的卓越性能,成为了农业领域的一颗璀璨新星。它不仅改变了传统的农业灌溉施肥方式,更为农业生产带来了高效、精…

【PCB设计】AD16教程:分配位号

1、前提条件 确保已经基本画完原理图 2、点击【Tools-Annotate Schematics】 3、依次点击【Reset All】、【Update Changes Lise】、【Close】 最后位号就被自动分配好了

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本 2024/11/25 15:59 20241125编译友善之臂的NanoPi R3S开发板【RK3566】精简步骤 2024/11/25 19:37 viewproviewpro-ThinkBook-16-G5-IRH:~$ viewproviewpro-ThinkBook-16-G5-IRH:~$ df -h viewproviewpro-T…

uniapp实际开发遇到过的问题(持续更新中....)

1. 在ios模拟器上会出现底部留白的情况 解决方案: 在manifest.json文件,找到开源码视图配置,添加如下: "app-plus" : {"safearea":{"bottom":{"offset" : "none" // 底部安…

计算机网络:应用层知识点概述及习题

网课资源: 湖科大教书匠 1、概述 习题1 1 在计算机网络体系结构中,应用层的主要功能是 A. 实现进程之间基于网络的通信 B. 通过进程之间的交互来实现特定网络应用 C. 实现分组在多个网络上传输 D. 透明传输比特流 2 以下不属于TCP/IP体系结构应用层范畴…

数据治理:在企业数据管理中的关键角色与实现路径——《DAMA 数据管理知识体系指南》读书笔记- 第 3 章

文章目录 1. 数据治理的核心内涵与战略价值2. 数据治理的驱动因素:不仅仅是合规3. 数据治理的组织模型:选择适合企业结构的运营模式4. 实施数据治理的关键步骤:战略、制度和文化5. 数据治理工具的选择:支持业务与流程的高效管理6.…

递推概念和例题

一、什么是递推 递推算法以初始值为基础,用相同的运算规律,逐次重复运算,直至求出问题的解,它的本质是按照固定的规律逐步推出(计算出)下一步的结果 这种从“起点”重复相同的的方法直至到达问题的解&…

【Android】RecyclerView回收复用机制

概述 RecyclerView 是 Android 中用于高效显示大量数据的视图组件&#xff0c;它是 ListView 的升级版本&#xff0c;支持更灵活的布局和功能。 我们创建一个RecyclerView的Adapter&#xff1a; public class MyRecyclerView extends RecyclerView.Adapter<MyRecyclerVie…

websocket是什么?

一、定义 Websocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它允许服务器主动向客户端推送数据&#xff0c;而不需要客户端不断的轮询服务器来获取数据 与http协议不同&#xff0c;http是一种无状态的&#xff0c;请求&#xff0c;响应模式的协议(单向通信)&a…

已存大量数据的mysql库实现主从各种报错----解决方案

背景何谓“先死后生”本文使用技术1、实施流程图2、实施2.1、数据库备份2.2、搭建Mysql的Master-Slave2.2.1、准备工作2.2.2、开始部署2.2.3、账号配置2.2.4、slave 同步配置2.2.5、验证 2.3、Master做数据恢复 结语 背景 计划对已有大量数据的mysql库的主从搭建&#xff0c;使…

SAP 零售方案 CAR 系统的介绍与研究

前言 当今时代&#xff0c;零售业务是充满活力和活力的业务领域之一。每天&#xff0c;由于销售运营和客户行为&#xff0c;它都会生成大量数据。因此&#xff0c;公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…

模电复习易错题

PN 结&#xff1a;PN 结是由 P 型半导体和 N 型半导体通过特殊工艺结合在一起形成的结构。P 型半导体中多子是空穴&#xff0c;N 型半导体中多子是电子。内建电场&#xff1a;在 PN 结形成时&#xff0c;由于 P 区和 N 区载流子浓度的差异&#xff0c;会在结区形成一个内建电场…

AI安全:从现实关切到未来展望

近年来&#xff0c;人工智能技术飞速发展&#xff0c;从简单的图像识别到生成对话&#xff0c;从自动驾驶到医疗诊断&#xff0c;AI技术正深刻改变着我们的生活。然而&#xff0c;伴随着这些进步&#xff0c;AI的安全性和可控性问题也日益凸显。这不仅涉及技术层面的挑战&#…

nfs网络文件系统

NFS(Network File system&#xff0c;网络文件系统)是由SUN公司研制的UNIX表示层协议&#xff0c;它允许网络中的计算机(不同的计算机、不同的操作系统)之间通过TCP/IP网络共享资源&#xff0c;主要在unix系列操作系统上使用。在NFS的应用中&#xff0c;本地NFS的客户端应用可以…

mac终端配置-支持 git branch

mac 终端一般使用的是 zsh&#xff1b; 由于不想安装三方的软件&#xff0c;可以自行编写脚本实现一些效果&#xff1b; 最终效果如下&#xff0c;支持显示git 分支&#xff1a; git_branch(){branch"git branch 2>/dev/null | grep "^\*" | sed -e "…