手动实现 Vue 3的简易双向数据绑定(模仿源码)

Vue 3 带来了许多令人兴奋的新特性和改进,其中之一就是其双向数据绑定的实现方式。与 Vue 2 使用 Object.defineProperty 不同,Vue 3 利用了 JavaScript 的 Proxy 特性来创建响应式数据。在这篇博客中,我们将探讨 Vue 3 中双向数据绑定的基础原理,并尝试手动实现一个简化版的这一机制。

核心概念

Vue 3 的双向绑定依赖于两个核心概念:响应式代理(Reactive Proxy)Effect 依赖收集系统

响应式代理

Vue 3 使用 Proxy 对象来创建响应式数据。这允许框架在不改变对象本身结构的情况下,拦截并跟踪属性的访问和修改。

Effect 依赖收集系统

Effect 依赖收集系统用于自动追踪响应式数据的使用情况,并在数据变化时重新执行副作用(如渲染函数)。

实现步骤

以下是手动实现 Vue 3 双向绑定的简化步骤:

1. 创建 reactive 函数

这个函数用于将普通对象转换为响应式代理。

function reactive(target) {// 使用 Proxy 对象创建响应式数据return new Proxy(target, {// 拦截对象属性的读取get(target, key, receiver) {console.log(`访问了属性:${key}`);// 使用 Reflect.get 保证 this 指向正确return Reflect.get(target, key, receiver);},// 拦截对象属性的设置set(target, key, value, receiver) {console.log(`设置了属性:${key},新值为:${value}`);// 使用 Reflect.set 设置属性值Reflect.set(target, key, value, receiver);// 此处省略了依赖通知逻辑,实际 Vue 3 中会触发更新return true;}});
}

2. 定义 effect 函数

effect 函数用于注册副作用函数,并在响应式数据变化时执行这些函数。

let activeEffect = null;function effect(fn) {// 设置当前活动的副作用函数activeEffect = fn;// 立即执行函数,用于依赖收集fn();// 重置当前活动的副作用函数activeEffect = null;
}

3. 改进 reactive 以收集依赖

现在我们需要修改 reactive 函数,以支持依赖收集和派发更新。

const targetMap = new WeakMap();function track(target, key) {// 如果没有活动的副作用函数,直接返回if (!activeEffect) return;// 从 targetMap 中获取当前对象的所有依赖let depsMap = targetMap.get(target);if (!depsMap) {// 如果没有,就创建新的 Map 并存入 targetMaptargetMap.set(target, (depsMap = new Map()));}// 获取当前属性的所有依赖let dep = depsMap.get(key);if (!dep) {// 如果没有,就创建新的 Set 并存入 depsMapdepsMap.set(key, (dep = new Set()));}// 将当前活动的副作用函数添加到依赖集合中dep.add(activeEffect);
}function trigger(target, key) {// 从 targetMap 中获取对象的所有依赖const depsMap = targetMap.get(target);if (!depsMap) return;// 获取当前属性的所有依赖let dep = depsMap.get(key);if (dep) {// 对于每一个依赖(即副作用函数),执行它dep.forEach(effect => effect());}
}// 更新 reactive 函数
function reactive(target) {return new Proxy(target, {// 拦截属性读取get(target, key, receiver) {// 收集依赖track(target, key);return Reflect.get(target, key, receiver);},// 拦截属性设置set(target, key, value, receiver) {// 设置属性值Reflect.set(target, key, value, receiver);// 触发更新trigger(target, key);return true;}});
}

4. 测试实例

创建一个响应式对象,并观察它的变化。

const state = reactive({ count: 0 });// 注册一个副作用函数来模拟渲染逻辑
effect(() => {console.log(`count is now: ${state.count}`);
});// 更改响应式数据的属性,触发副作用函数
state.count++;

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 简易双向数据绑定测试</title>
</head>
<body><h1>Vue 3 简易双向数据绑定测试</h1><div id="app"><p>Count: <span id="count">0</span></p><button id="increment">Increment</button></div><script>// reactive 函数function reactive(target) {const handler = {get(target, key, receiver) {track(target, key);return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {Reflect.set(target, key, value, receiver);trigger(target, key);return true;}};return new Proxy(target, handler);}let activeEffect = null;function effect(fn) {activeEffect = fn;fn();activeEffect = null;}const targetMap = new WeakMap();function track(target, key) {if (!activeEffect) return;let depsMap = targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap = new Map()));}let dep = depsMap.get(key);if (!dep) {depsMap.set(key, (dep = new Set()));}dep.add(activeEffect);}function trigger(target, key) {const depsMap = targetMap.get(target);if (!depsMap) return;let dep = depsMap.get(key);if (dep) {dep.forEach(effect => effect());}}// 测试代码const state = reactive({ count: 0 });effect(() => {document.getElementById('count').innerText = state.count;});document.getElementById('increment').addEventListener('click', () => {state.count++;});</script>
</body>
</html>

在这个文件中,我们创建了一个按钮,每当它被点击时,就会增加 state.count 的值。这个值的变化会触发绑定的副作用函数,从而更新显示在页面上的计数结论

小结

以上代码展示了一个 Vue 3 中双向数据绑定的简化实现。通过 Proxy 和动态依赖收集系统,我们可以创建一个灵活且强大的响应式系统。这种实现方式使得 Vue 3 在处理复杂应用时更为高效和灵活。

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

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

相关文章

Python MySQL数据库连接实现增删改查

一、应用场景 python项目连接MySQL数据库时&#xff0c;需要第三方库的支持。这篇文章使用的是PyMySQL库&#xff0c;适用于python3.x。 二、安装 pip install PyMySQL三、使用方法 1.导入模块 import pymysql2.连接数据库 db pymysql.connect(hostlocalhost,usercode_s…

【Linux 驱动】Linux设备树(四)—— 设备树驱动LED

有了设备树以后&#xff0c;我们可以将寄存器信息保存到设备树&#xff0c;即便是更换了一个设备&#xff0c;我们也无需修改驱动文件&#xff0c;只需要修改设备树文件并重新编译。 下面介绍两种通过设备树驱动 LED 的最简单的方式&#xff0c;这两种方式的主要是设备树中 re…

什么是触控芯片?触控芯片有哪些?

一、什么是触控芯片&#xff1f; 触控芯片是一种用于感知人机交互行为的电子元器件&#xff0c;通过感应人体肌肉、电容电场和压力等多种信号&#xff0c;实现触摸屏幕、手势操作、手写输入等功能。二、触控芯片的工作原理 触控芯片的工作原理基于电容原理&#xff0c;当人体肌…

一文读懂PMP项目管理

PMP项目管理是什么 PMP&#xff08;Project Management Professional&#xff09;指项目管理专业人员资格认证&#xff0c;由美国项目管理协会&#xff08;Project Management Institute&#xff0c;简称PMI&#xff09;发起&#xff0c;目前已在全球206个国家和地区进行认证&…

小黑南京归来,参加部里的公务员培训,有点儿社死认识了好多小伙伴的leetcode之旅13. 罗马数字转整数

小黑代码 class Solution:def romanToInt(self, s: str) -> int:chars [M, CM, D, CD, C, XC, L, XL, X, IX, V, IV,I]nums [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1]map_ dict((k, v) for k,v in zip(chars, nums))# 字符串长度n len(s)# 结果变量res …

Java集合转int数组

集合通过toArray()方法进行转换为数组&#xff0c;可以转换成为指定类型的数组&#xff0c; 【但是】这些类型都必须是object类型的子类&#xff0c;基本类型不可以。 可以通过stream流处理&#xff1a; Set<Integer> set new HashSet<>(); int[] result interSet…

Swagger2解放双手的API开发文档生成

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《MyBatis-Plus》。&#x1f3af;&#x1f3af; &am…

修改Mysql密码

ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY password

NFS原理详解

一、NFS介绍 1&#xff09;什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录。 NFS服务器可以允许NFS客户端将远端NFS服务器端的共享目录挂载到本地的NFS客户端中。 在本地的NFS客户端的机器看来&#xff0c;NFS服务器端共享的目录就好像自己的磁…

Tomcat为什么要重写类加载器?

文章目录 一、双亲委派机制二、分析1、Tomcat需要隔离性2、Tomcat需要热替换3、打破双亲委派机制 三、Tomcat类加载器1、拓展类加载器2、工作原理 四、总结 一、双亲委派机制 首先了解下双亲委派机制&#xff0c;大致过程如下&#xff1a; 简单来说&#xff0c;就是加载class…

ansible(不能交互)

1、定义 基于python开发的一个配置管理和应用部署工具&#xff0c;在自动化运维中异军突起&#xff0c;类似于xshell一键输入的工具&#xff0c;不需要每次都切换主机进行操作&#xff0c;只要有一台ansible的固定主机&#xff0c;就可以实现所有节点的操作。不需要agent客户端…

位操作符详解(C语言)

前言 C语言中的位操作符是用来对数据的二进制表示进行位级操作的运算符。这些操作符包括位与&#xff08;&&#xff09;、位或&#xff08;|&#xff09;、位异或&#xff08;^&#xff09;、位取反&#xff08;~&#xff09;&#xff0c;这些位操作符可以用来进行各种位级…

【汇编先导】-- 2

汇编先导 6. 寄存器 存储数据&#xff1a;CPU > 内存 > 硬盘(固态、机械) CPU还可分为&#xff1a; 32位CPU 8 16 32 64位CPU 8 16 32 64(增加了寻址能力) 通用寄存器 # 32位的通用寄存器只有8个 # 可以在任意软件的底层看到 # 通用寄存器可以存储任何值存值的范围…

Cesium 实战 - OD 通信线 - 移动连接线

Cesium 实战 - OD 通信线 - 移动连接线 OD 通信线 - 移动连接线核心代码完整代码在线示例 在项目中&#xff0c;实现完卫星通信线之后&#xff0c;又有一个新需求&#xff0c;需要通信线根据火箭移动而移动&#xff0c;相当于追踪效果&#xff0c;思考之后通过 Entity Callback…

【Python可视化系列】一文教会你绘制美观的直方图(理论+源码)

一、引言 前面我详细介绍了如何绘制漂亮的折线图和柱状图&#xff1a; 【Python可视化系列】一文彻底教会你绘制美观的折线图&#xff08;理论源码&#xff09; 【Python可视化系列】一文教会你绘制美观的柱状图&#xff08;理论源码&#xff09; 对于一个连续性的变量&#xf…

中国社科院与新加坡新跃社科联合培养工商管理博士

全球经济正在经历由科技进步与创新、政治和人口的剧烈变化所带来的巨大不确定性与挑战。企业的领导者和管理者需要发展出战略性思维和全球洞察力以便面对越来越大的经济波动。中国社科院与新加坡新跃社科联合培养工商管理博士项目的训练能够让学生在一个企业和组织的改变和发展…

海思SD3403,SS928/926,hi3519dv500,hi3516dv500移植yolov7,yolov8(5)

上一篇已经把Onnx模型导出来了,在Netron看到层都对了之后就要去转换om模型了。 首先,强烈建议不要和训练的linux搞一起,很多库不一定一样。如果很熟练能来回切换Python版本和库的牛人另当别论。 1. 依赖库安装 几个依赖库版本这里列一下,方便参考。我用的是Ubuntu18.04。…

B039-SpringMVC基础

目录 SpringMVC简介复习servletSpringMVC入门导包配置前端控制器编写处理器实现Contoller接口普通类加注解(常用) 路径问题获取参数的方式过滤器简介自定义过滤器配置框架提供的过滤器 springMVC向页面传值的三种方式视图解析器springMVC的转发和重定向 SpringMVC简介 1.Sprin…

澳鹏干货解答!“关于机器学习的十大常见问题”

探索机器学习的常见问题&#xff0c;了解机器学习和人工智能的基本概念、原理、发展趋势、用途、方法和所需的数据要求从而发掘潜在的商机。 什么是机器学习&#xff1f; 机器学习即教授机器如何学习的过程&#xff0c;为机器提供指导&#xff0c;帮助它们自己开发逻辑&#…

SpringBoot-XXLJOB提供动态API调度任务

目录 一、项目版本 二、XXL-JOB提供动态API controller层 service层 三、SpringBoot项目 pom model XxlJobUtil-工具类 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&…