Vue3响应式源码实现
Vue3响应式源码实现
初始化项目结构
vue-proxy
├── effect.js
├── effect.ts
├── index.html
├── index.js
├── package.json
├── reactive.js
├── reactive.ts
└── webpack.config.js
reactive.ts
import { track, trigger } from "./effect"// 判断是否是对象
const isObject = (target) => target !== null && typeof target === "object"// 泛型约束只能传入Object类型
export const reactive = <T extends object>(target: T) => {return new Proxy(target, {get(target, key, receiver) {console.log(target);console.log(key);console.log(receiver);let res = Reflect.get(target, key, receiver)track(target, key)if (isObject(res)) {return reactive(res)}return res},set(target, key, value, receiver) {let res = Reflect.set(target, key, value, receiver)console.log(target, key, value);trigger(target, key)return res}})}
effect.ts
// 更新视图的方法
let activeEffect;
export const effect = (fn: Function) => {const _effect = function () {activeEffect = _effect;fn()}_effect()
}// 收集依赖
const targetMap = new WeakMap()
export const track = (target, key) => {let depsMap = targetMap.get(target)if (!depsMap) {depsMap = new Map()targetMap.set(target, depsMap)}let deps = depsMap.get(key)if (!deps) {deps = new Set()depsMap.set(key, deps)}deps.add(activeEffect)
}// 触发更新
export const trigger = (target, key) => {const depsMap = targetMap.get(target)const deps = depsMap.get(key)deps.forEach(effect => effect())
}
测试
执行 tsc 转成 js 代码，没有 tsc 的全局安装 typescript
npm install typescript -g
新建 index.js，分别引入 effect.js 和 reactive.js
import { effect } from "./effect.js";
import { reactive } from "./reactive.js";let data = reactive({name: "lisit",age: 18,foor: {bar: "汽车"}
})effect(() => {document.getElementById("app").innerText = `数据绑定：${data.name} -- ${data.age} -- ${data.foor.bar}`
})document.getElementById("btn").addEventListener("click", () => {data.age++
})
新建index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><button id="btn">按钮</button>
</body>
然后再根目录执行
npm init -y
安装依赖
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
然后新建 webpack.config.js
const path = require("path")
const HtmlWebpakcPlugin = require("html-webpack-plugin")module.exports = {entry: "./index.js",output: {path: path.resolve(__dirname, "dist")},plugins: [new HtmlWebpakcPlugin({template: path.resolve(__dirname, "./index.html")})],mode: "development",// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},
}
执行命令启动项目
npx webpack serve
相关文章：
Vue3响应式源码实现
Vue3响应式源码实现 初始化项目结构 vue-proxy ├── effect.js ├── effect.ts ├── index.html ├── index.js ├── package.json ├── reactive.js ├── reactive.ts └── webpack.config.jsreactive.ts import { track, trigger } from "./effect&q…...
【RapidAI】P1 中文文本切割程序
中文文本切割程序 基本信息代码解析相关包获取 yaml 关键文件类的构造函数切分语句部分特殊处理 PDF重点切分去除数组中空字符串再度切分后长度 附录附录一：完整代码附录二：可继续思考问题 基本信息 文件名： chinese_text_splitter.py 文件地…...
4、QT中的网络编程
一、Linux中的网络编程 1、子网和公网的概念 子网网络：局域网，只能进行内网的通信公网网络：因特网，服务器等可以进行远程的通信 2、网络分层模型 4层模型：应用层、传输层、网络层、物理层 应用层：用户自…...
单例模式（饿汉式单例 VS 懒汉式单例）
所谓的单例模式就是保证某个类在程序中只有一个对象 一、如何控制只产生一个对象？ 1.构造方法私有化（保证对象的产生个数） 创建类的对象，要通过构造方法产生对象 构造方法若是public权限，对于类的外部，可…...
Oracle数据库连接之TNS-12541异常
在进行数据库开发的时候，通常需要使用PLSQL Developer开发工具连接Oralce数据库，在进行连接时，经常性的会提示TNS-12541:TNS:no listener（没有监听），从而导致PLSQL Developer 无法连接到数据库实例…...
sql中的排序函数dense_rank()，RANK()和row_number()
dense_rank()，RANK()和row_number()是SQL中的排序函数。 为方便后面的函数差异比对清晰直观，准备数据表如下： 1.dense_rank() 函数语法：dense_rank() over( order by 列名 【desc/asc】) DENSE_RANK()是连续排序，比如…...
Flask狼书笔记 | 05_数据库
文章目录 5 数据库5.1 数据库的分类5.2 ORM5.3 使用Flask_SQLAlchemy5.4 数据库操作5.5 定义关系5.6 更新数据库表5.7 数据库进阶小结 5 数据库 这一章学习如何在Python中使用DBMS（数据库管理系统），来对数据库进行管理和操作。本书使用SQLit…...
HJ70 矩阵乘法计算量估算
Powered by:NEFU AB-IN Link 文章目录 HJ70 矩阵乘法计算量估算题意思路代码 HJ70 矩阵乘法计算量估算 题意 矩阵乘法的运算量与矩阵乘法的顺序强相关。 例如： A是一个5010的矩阵，B是1020的矩阵，C是205的矩阵 计算ABC有两种顺序：…...
Doris数据库使用记录
新建表 create table tonly_attendance(vin varchar(64),diggings_name varchar(256),area varchar(64),diggings_type varchar(256),work_time decimal(20,2),engine_run_time decimal(20,2),upload_time varchar(64))DUPLICATE KEY (vin)distributed by hash (vin)删除之…...
华为OD机试真题【篮球比赛】
1、题目描述 【篮球比赛】 一个有N个选手参加比赛，选手编号为1~N（3<N<100），有M（3<M<10）个评委对选手进行打分。 打分规则为每个评委对选手打分，最高分10分，最低分1分。…...
sublime text 格式化json快捷键配置
以 controlcommandj 为例。 打开Sublime Text，依次点击左上角菜单Sublime Text->Preferences->Key Bindings，出现以下文件： 左边的是Sublime Text默认的快捷键，不可编辑。右边是我们自定义快捷键的地方，在中括号…...
Spring Cloud 面试题总结
Spring Cloud和各子项目版本对应关系 Spring Cloud 是一个用于构建分布式系统的开发工具包，它基于Spring Boot提供了一组模块和功能，用于构建微服务架构中的分布式应用程序。Spring Cloud的不同子项目有各自的版本，下面是一些常见的Spring C…...
如何实现24/7客户服务自动化？
传统的客服制胜与否的法宝在于人，互联网时代，对于产品线广的大型企业来说：单靠人力，成本大且效率低，相对于产品相对单一的中小型企业来说：建设传统客服系统的成本难以承受，企业客户服务的转型已…...
2022年12月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试
C/C++编程（1~8级）全部真题・点这里 第1题：区间合并 给定 n 个闭区间 [ai; bi]，其中i=1,2,…,n。任意两个相邻或相交的闭区间可以合并为一个闭区间。例如，[1;2] 和 [2;3] 可以合并为 [1;3]，[1;3] 和 [2;4] 可以合并为 [1;4]，但是[1;2] 和 [3;4] 不可以合并。 我们的任务是…...
【Spring Cloud系列】 雪花算法原理及实现
【Spring Cloud系列】 雪花算法原理及实现 文章目录 【Spring Cloud系列】 雪花算法原理及实现一、概述二、生成ID规则部分硬性要求三、ID号生成系统可用性要求四、解决分布式ID通用方案4.1 UUID4.2 数据库自增主键4.3 基于Redis生成全局id策略 五、SnowFlake（雪花算…...
Postgresql 阿里云部署排雷
启动服务bug： 根据你的输出，可以看到 PostgreSQL 服务启动失败，并且显示以下错误消息： pg_ctl: cannot be run as root Please log in (using, e.g., "su") as the (unprivileged) user that will own the server proc…...
l8-d10 TCP协议是如何实现可靠传输的
一、TCP主要特点 TCP 是面向连接的运输层协议，在无连接的、不可靠的 IP 网络服务基础之上提供可靠交付的服务。为此，在 IP 的数据报服务基础之上，增加了保证可靠性的一系列措施。 TCP主要特点 1.TCP 是面向连接的运输层协议。 每一条 TCP 连…...
9月9日扒面经
堆和栈的区别？ 分配方式：堆内存是由程序员手动分配和释放的，而栈内存是由编译器自动分配和释放的。内存管理：堆内存需要手动管理内存的分配和释放，程序员需要显式地调用malloc()或new来分配内存，并使用fre…...
项目实战：ES的增加数据和查询数据
文章目录 背景在ES中增加数据新建索引删除索引 在ES中查询数据查询数据总数量 项目具体使用（实战）引入依赖方式一：使用配置类连接对应的es服务器创建配置类编写业务逻辑----根据关键字查询相关的聊天内容在ES中插入数据 总结提升 背景 最近需…...
vs code调试rust乱码问题解决方案
在terminal中 用chcp 65001 修改一下字符集，就行了。有的博主推荐 修改 区域中的设置，这会引来很大的问题。千万不要修改如下设置：...
射频非线性建模：从S参数到X参数与NVNA的工程实践
1. 非线性星期三：一场射频工程师的“大信号”狂欢如果你是一名射频或微波电路设计工程师，对S参数、负载牵引、谐波失真这些词感到既熟悉又头疼，那么十多年前在巴尔的摩举行的国际微波研讨会（IMS 2011）上，有…...
ARM架构TRFCR_EL2寄存器详解与虚拟化调试实践
1. ARM架构中的TRFCR_EL2寄存器概述在ARMv8/v9架构中，TRFCR_EL2（Trace Filter Control Register at EL2）是一个关键的系统寄存器，专门用于在Hypervisor（EL2）级别控制处理器的跟踪功能。作为ARM CoreSight调…...
IV测试仪选购避坑指南，这几点一定要提前了解
在光伏产业链中，IV测试仪应用广泛，覆盖组件分选、实验室检定、电站验收、运维排查等场景。市面上仪器品类繁杂，包含台式实验室款、生产线分选款、户外检测款，价格差距悬殊。不少采购人员不懂场景适配，盲目比价、堆砌参…...
OpenAI成立部署公司并收购Tomoro，AI竞争焦点转向企业落地
OpenAI成立部署公司背后的战略布局品玩5月12日消息，据techstartups报道，OpenAI近日宣布成立“OpenAI部署公司”，该实体由OpenAI控股。同时，OpenAI获TPG领投，还有包括Bain Capital、Brookfield、Goldman Sachs及SoftBan…...
从零搭建ROS Gazebo仿真小车：集成摄像头与YOLO目标检测实现视觉感知
1. 环境准备与ROS安装 在开始构建仿真小车之前，我们需要先搭建好开发环境。ROS（Robot Operating System）是目前机器人开发最流行的框架之一，它提供了硬件抽象、设备驱动、库函数、可视化工具等丰富功能。我推荐使用Ubuntu 20.04 L…...
基于多智能体协作的AI开发流程：三人团队模式解析与实践
1. 项目概述与核心痛点如果你和我一样，在日常开发中深度依赖像Claude这样的AI编码助手，那你一定也经历过那种“又爱又恨”的时刻。爱的是它强大的代码生成和理解能力，恨的是它时不时会“放飞自我”——比如你只想让它修改一个函数，…...
2026 年 TanStack npm 供应链遭入侵：42 个包 84 版本受影响，多方面待解决问题待明确
总结2026 年 5 月 11 日 19:20 至 19:26 UTC 期间，攻击者通过结合“Pwn Request”模式的 pull_request_target、跨越分叉↔主库信任边界的 GitHub Actions 缓存投毒，以及从 GitHub Actions 运行器进程中提取 OIDC 令牌，在 42 个 tanstack/* n…...
基于Puppeteer的网页结构化检查工具：原理、实现与优化
1. 项目概述：一个面向开发者的网页内容检查与结构化工具最近在折腾一个很有意思的小项目，起因是团队里经常需要从各种网页上抓取信息，然后手动整理成结构化的数据。比如，产品经理丢过来一个竞品网站链接，让你分析一下他…...
HDiffPatch实际应用案例：APK文件差异化和Android应用商店优化
HDiffPatch实际应用案例：APK文件差异化和Android应用商店优化 【免费下载链接】HDiffPatch a C\C library and command-line tools for Diff & Patch between binary files or directories(folder); cross-platform; runs fast; create small delta/differentia…...
iPaaS平台推荐——五款产品能力与适用场景观察
在数字化转型加速推进的当下，iPaaS（集成平台即服务）正成为企业打通数据孤岛、连接应用生态的核心基础设施。面对市场上类型各异的集成平台，如何根据自身需求选择合适的解决方案，成为众多企业关注的重点。本文基于公开资…...