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 修改一下字符集，就行了。有的博主推荐 修改 区域中的设置，这会引来很大的问题。千万不要修改如下设置：...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中，如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议（2PC）通过准备阶段与提交阶段的协调机制，以同步决策模式确保事务原子性。其改进版本三阶段提交协议（3PC…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...