当前位置： 首页 > news >正文

Vue3响应式源码实现

news 2025/12/21 17:58:49

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

image-20230904232457817

image-20230904232522425

相关文章：

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…...

编程日记 2023/9/9 22:49:56

【RapidAI】P1 中文文本切割程序

中文文本切割程序 基本信息代码解析相关包获取 yaml 关键文件类的构造函数切分语句部分特殊处理 PDF重点切分去除数组中空字符串再度切分后长度 附录附录一&#xff1a;完整代码附录二&#xff1a;可继续思考问题 基本信息 文件名&#xff1a; chinese_text_splitter.py 文件地…...

编程日记 2023/9/9 22:48:54

4、QT中的网络编程

一、Linux中的网络编程 1、子网和公网的概念 子网网络&#xff1a;局域网&#xff0c;只能进行内网的通信公网网络&#xff1a;因特网&#xff0c;服务器等可以进行远程的通信 2、网络分层模型 4层模型&#xff1a;应用层、传输层、网络层、物理层 应用层&#xff1a;用户自…...

编程日记 2023/9/9 22:47:53

单例模式（饿汉式单例 VS 懒汉式单例）

所谓的单例模式就是保证某个类在程序中只有一个对象 一、如何控制只产生一个对象&#xff1f; 1.构造方法私有化&#xff08;保证对象的产生个数&#xff09; 创建类的对象&#xff0c;要通过构造方法产生对象 构造方法若是public权限&#xff0c;对于类的外部&#xff0c;可…...

编程日记 2023/9/9 22:46:52

Oracle数据库连接之TNS-12541异常

在进行数据库开发的时候&#xff0c;通常需要使用PLSQL Developer开发工具连接Oralce数据库&#xff0c;在进行连接时&#xff0c;经常性的会提示TNS-12541:TNS:no listener&#xff08;没有监听&#xff09;&#xff0c;从而导致PLSQL Developer 无法连接到数据库实例&#xf…...

编程日记 2023/9/9 22:45:51

sql中的排序函数dense_rank()，RANK()和row_number()

dense_rank()&#xff0c;RANK()和row_number()是SQL中的排序函数。 为方便后面的函数差异比对清晰直观&#xff0c;准备数据表如下&#xff1a; 1.dense_rank() 函数语法&#xff1a;dense_rank() over( order by 列名 【desc/asc】) DENSE_RANK()是连续排序&#xff0c;比如…...

编程日记 2023/9/9 22:44:51

Flask狼书笔记 | 05_数据库

文章目录 5 数据库5.1 数据库的分类5.2 ORM5.3 使用Flask_SQLAlchemy5.4 数据库操作5.5 定义关系5.6 更新数据库表5.7 数据库进阶小结 5 数据库 这一章学习如何在Python中使用DBMS&#xff08;数据库管理系统&#xff09;&#xff0c;来对数据库进行管理和操作。本书使用SQLit…...

编程日记 2023/9/9 22:43:50

HJ70 矩阵乘法计算量估算

Powered by:NEFU AB-IN Link 文章目录 HJ70 矩阵乘法计算量估算题意思路代码 HJ70 矩阵乘法计算量估算 题意 矩阵乘法的运算量与矩阵乘法的顺序强相关。 例如&#xff1a; A是一个5010的矩阵&#xff0c;B是1020的矩阵&#xff0c;C是205的矩阵 计算ABC有两种顺序&#xff1a;…...

编程日记 2023/9/9 22:42:49

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)删除之…...

编程日记 2023/9/9 22:41:48

华为OD机试真题【篮球比赛】

1、题目描述 【篮球比赛】 一个有N个选手参加比赛&#xff0c;选手编号为1~N&#xff08;3<N<100&#xff09;&#xff0c;有M&#xff08;3<M<10&#xff09;个评委对选手进行打分。 打分规则为每个评委对选手打分&#xff0c;最高分10分&#xff0c;最低分1分。…...

编程日记 2023/9/9 22:40:47

sublime text 格式化json快捷键配置

以 controlcommandj 为例。 打开Sublime Text&#xff0c;依次点击左上角菜单Sublime Text->Preferences->Key Bindings&#xff0c;出现以下文件&#xff1a; 左边的是Sublime Text默认的快捷键&#xff0c;不可编辑。右边是我们自定义快捷键的地方&#xff0c;在中括号…...

编程日记 2023/9/9 22:39:46

Spring Cloud 面试题总结

Spring Cloud和各子项目版本对应关系 Spring Cloud 是一个用于构建分布式系统的开发工具包&#xff0c;它基于Spring Boot提供了一组模块和功能&#xff0c;用于构建微服务架构中的分布式应用程序。Spring Cloud的不同子项目有各自的版本&#xff0c;下面是一些常见的Spring C…...

编程日记 2023/9/9 22:38:44

如何实现24/7客户服务自动化？

传统的客服制胜与否的法宝在于人&#xff0c;互联网时代&#xff0c;对于产品线广的大型企业来说&#xff1a;单靠人力&#xff0c;成本大且效率低&#xff0c;相对于产品相对单一的中小型企业来说&#xff1a;建设传统客服系统的成本难以承受&#xff0c;企业客户服务的转型已…...

编程日记 2023/9/9 22:37:41

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] 不可以合并。 我们的任务是…...

编程日记 2023/9/9 22:36:41

【Spring Cloud系列】 雪花算法原理及实现

【Spring Cloud系列】 雪花算法原理及实现 文章目录 【Spring Cloud系列】 雪花算法原理及实现一、概述二、生成ID规则部分硬性要求三、ID号生成系统可用性要求四、解决分布式ID通用方案4.1 UUID4.2 数据库自增主键4.3 基于Redis生成全局id策略 五、SnowFlake&#xff08;雪花算…...

编程日记 2023/9/9 22:34:35

Postgresql 阿里云部署排雷

启动服务bug&#xff1a; 根据你的输出&#xff0c;可以看到 PostgreSQL 服务启动失败&#xff0c;并且显示以下错误消息&#xff1a; pg_ctl: cannot be run as root Please log in (using, e.g., "su") as the (unprivileged) user that will own the server proc…...

编程日记 2023/9/9 22:33:34

l8-d10 TCP协议是如何实现可靠传输的

一、TCP主要特点 TCP 是面向连接的运输层协议&#xff0c;在无连接的、不可靠的 IP 网络服务基础之上提供可靠交付的服务。为此&#xff0c;在 IP 的数据报服务基础之上&#xff0c;增加了保证可靠性的一系列措施。 TCP主要特点 1.TCP 是面向连接的运输层协议。 每一条 TCP 连…...

编程日记 2023/9/9 22:32:33

9月9日扒面经

堆和栈的区别&#xff1f; 分配方式&#xff1a;堆内存是由程序员手动分配和释放的&#xff0c;而栈内存是由编译器自动分配和释放的。内存管理&#xff1a;堆内存需要手动管理内存的分配和释放&#xff0c;程序员需要显式地调用malloc()或new来分配内存&#xff0c;并使用fre…...

编程日记 2023/9/9 22:31:31

项目实战：ES的增加数据和查询数据

文章目录 背景在ES中增加数据新建索引删除索引 在ES中查询数据查询数据总数量 项目具体使用&#xff08;实战&#xff09;引入依赖方式一&#xff1a;使用配置类连接对应的es服务器创建配置类编写业务逻辑----根据关键字查询相关的聊天内容在ES中插入数据 总结提升 背景 最近需…...

编程日记 2023/9/9 22:30:30

vs code调试rust乱码问题解决方案

在terminal中 用chcp 65001 修改一下字符集&#xff0c;就行了。有的博主推荐 修改 区域中的设置&#xff0c;这会引来很大的问题。千万不要修改如下设置&#xff1a;...

编程日记 2023/9/9 22:29:27

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/12/21 17:56:29

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/12/13 20:03:16

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/12/19 16:13:46

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/12/13 21:41:11

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/12/12 22:31:30