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

Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析

news 来源：原创 2025/8/18 16:26:00

Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析

一、框架演变：从Vue2到Vue3的跨越

1.1 革命性升级

Vue3的发布标志着前端框架进入新纪元，其核心改进体现在三个方面：

性能飞跃：包体积减少41%，初始渲染提速55%，更新性能提升133%
开发体验：Composition API带来更好的逻辑复用能力
未来兼容：完善的TypeScript支持与渐进式升级策略

1.2 兼容性设计

通过@vue/compat适配层实现平滑升级：

// vue.config.js
module.exports = {chainWebpack: config => {config.resolve.alias.set('vue', '@vue/compat')}
}

保留Options API的同时支持Composition API，新旧范式共存的设计保障了项目渐进式迁移。

二、架构革新：Monorepo与原子化设计

2.1 模块化重构

采用Monorepo架构拆分为独立子包：

packages/
├── compiler-core     // 核心编译逻辑
├── reactivity        // 响应式系统
├── runtime-core      // 运行时核心
└── shared            // 公共工具库

每个模块可独立构建、测试和发布，通过pnpm进行依赖管理。

2.2 TypeScript转型

源码TS覆盖率从Vue2的0%提升到Vue3的98%，类型系统带来的优势：

interface ComponentInternalInstance {uid: numbertype: ConcreteComponentparent: ComponentInternalInstance | nullappContext: AppContext
}

强类型约束使代码更健壮，配合Volar插件提供精准的类型提示。

三、性能优化四大支柱

3.1 API精简策略

移除filter、$on/$off等低频API，通过插件机制实现按需引入。

3.2 Tree-shaking优化

基于ESM的模块设计：

// 按需导入
import { ref, reactive } from '@vue/reactivity'

配合Rollup实现Dead Code Elimination，基础运行时仅12.5KB。

3.3 响应式系统重构

特性	Vue2(Object.defineProperty)	Vue3(Proxy)
检测范围	对象属性	完整对象
数组检测	需要hack处理	原生支持
新增属性	需要$set	直接响应
性能影响	递归初始化	按需代理

3.4 底层优化

事件缓存：将事件处理函数缓存到_cache数组
静态提升：将静态节点提升到渲染函数外部
补丁标记：动态绑定采用二进制位标记优化diff算法

四、编译时优化：智能的模板编译

4.1 静态分析

编译阶段生成带有PatchFlag的虚拟DOM：

// 编译前
<div>{{ msg }}</div>// 编译后
_createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

64种PatchFlag类型标识动态节点类型，优化diff过程。

4.2 Block Tree机制

通过动态节点收集器建立更新区块：

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "Static Content", -1 /* HOISTED */)function render() {return (_openBlock(), _createBlock("div", null, [_hoisted_1,_createVNode("span", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */)]))
}

静态内容被提升到渲染函数外部，避免重复创建。

五、核心源码解析

5.1 响应式系统实现

Vue3的响应式核心（@vue/reactivity）：

// 响应式入口
function reactive(target) {return createReactiveObject(target, mutableHandlers)
}// Proxy处理器
const mutableHandlers = {get(target, key, receiver) {track(target, 'get', key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)trigger(target, 'set', key)return result}
}

5.2 虚拟DOM优化

function patch(n1, n2, container) {if (n1 == null) {mountElement(n2, container)} else {updateElement(n1, n2, container)}
}function updateElement(n1, n2, container) {const el = (n2.el = n1.el)if (n2.patchFlag & PatchFlags.CLASS) {if (n1.class !== n2.class) {el.className = n2.class}} else {// 全量diff}
}

六、框架对比总结

维度	Vue2	Vue3
响应式系统	Object.defineProperty	Proxy
源码组织	单体仓库	Monorepo
类型支持	Flow	TypeScript
包体积	完整打包	按需引入
性能优化	手动优化	编译时自动优化
API设计	Options API	Composition API

七、手写响应式系统实现

const targetMap = new WeakMap()
let activeEffect = nullfunction track(target, key) {if (!activeEffect) returnlet 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) returnconst effects = depsMap.get(key)effects && effects.forEach(effect => effect())
}function reactive(obj) {return new Proxy(obj, {get(target, key, receiver) {track(target, key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)trigger(target, key)return result}})
}function effect(fn) {activeEffect = fnfn()activeEffect = null
}// 使用示例
const state = reactive({ count: 0 })
effect(() => {console.log('Count:', state.count)
}) // 输出 Count: 0state.count++ // 输出 Count: 1

结语

Vue3的架构演进体现了现代前端框架的发展方向：更精细的模块化、更智能的编译优化、更强大的类型支持。通过深入源码理解其设计哲学，不仅能提升开发技能，更能帮助我们做出合理的架构决策。建议结合官方源码导读，从packages/reactivity模块开始逐步深入探索。

Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析

Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析一、框架演变：从Vue2到Vue3的跨越 1.1 革命性升级 Vue3的发布标志着前端框架进入新纪元，其核心改进体现在三个方面： 性能飞跃：包体积减少41%，初始…...

编程日记 2025/8/18 16:26:00

评委打分5个评委去掉一个最高分和一个最低分取平均分

一键替换max用min 按shiftF6 public static int getMin(int[]scores){int min scores[0];for (int i 0; i < scores.length; i) {if(scores[i]> min){min scores[i];}}return min;} 这里有和c/c不一样的知识点 c/c调用函数类似于java的方法,但是c/c的函数调用需要声明…...

编程日记 2025/8/16 9:52:07

javabean类(测试类之外的类)

altinsert快捷键生成构造方法和get、set方法或者插件ptg（连接外网搜索插件并且下载）...

编程日记 2025/8/16 12:04:32

C++ 邻接矩阵（代码）

C邻接矩阵代码，见下： #include<iostream>using namespace std;#define inf -1 class Graph{ private:int vertices;int **edges;public:Graph(int vertices);~Graph();void addEdge(int u, int v, int w);void printGraph(); };Graph::Graph(int …...

编程日记 2025/8/17 16:57:35

Cookie与Session详解

Cookie简介 Cookie 是浏览器提供的持久化存储数据的一种机制。是指某些网站为了辨别用户身份、进行会话跟踪而储存在用户本地终端上的数据（通常经过加密）。以下是关于 Cookie 的详细介绍： Cookie工作原理当你访问一个网站时，该网…...

编程日记 2025/8/18 13:32:08

OpenBMC：BmcWeb 处理http请求

OpenBMC：BmcWeb 读取http请求头-CSDN博客介绍了，在读取完http头后，将调用Connection::handle处理http请求 1.Connection::handle void handle() {...req = std::make_shared<crow::Request>(parser->release(), reqEc);...req->session = userSession;accept …...

编程日记 2025/8/18 16:25:38

【算法题解答·六】栈队列堆

【算法题解答六】栈队列堆接上文【算法方法总结六】栈队列堆的一些技巧和注意事项栈队列堆相关题目如下： 232.用栈实现队列简单准备两个栈，一个负责入队的栈A，一个负责出队的栈B出队和返回队列开头元素，都要先进行以下操作…...

编程日记 2025/8/16 9:46:48

计算机视觉算法实战——手势识别（主页有源码）

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 1. 领域简介：手势识别的价值与挑战手势识别是连接人类自然行为与数字世界的核心交互技术，在智能设备控制、…...

编程日记 2025/8/18 13:30:59

JobScheduler省电机制

1.前言 JobScheduler（任务调度器）是 Android 提供的一种任务调度机制，可以替代传统的 WakeLock 和 Alarm 来执行后台任务。那么，它们之间的区别是什么？JobScheduler 又有哪些特别之处呢？ 1.1 WakeLock 和 …...

编程日记 2025/8/16 12:49:42

设计模式学习笔记——命令模式

2025年3月13日，周四下午相同的保存逻辑在各个组件中重复出现。且需要修改保存逻辑时，各个组件的保存逻辑都需要进行相应修改。使用了命令模式把保存逻辑从三个组件中独立出来后，减少了代码冗余。可以通过“保存命令”来使用保存逻辑&am…...

编程日记 2025/8/16 9:52:03

[TPCTF 2025] crypto 复现两题

周末很忙。比赛都没怎么看。晚上把密码复现两个。 randomized random 这题在小鸡块博客里见过，稍有区别。 # FROM python:3 import random with open("flag.txt","rb") as f:flagf.read() for i in range(2**64):print(random.getrandbits(3…...

编程日记 2025/8/17 10:41:22

电子元器件选型与实战应用—16 怎么选一个合适的MCU芯片？

文章目录 1. 选型要素1.1 价格1.2 技术支持1.3 厂家优势1.4 功耗1.5 特殊功能1.6 统计外设1.7 确定外设占用的内存和flash大小1.8 确定外设通信接口1.9 确定外设通信接口的电平1.10 确定外设的GPIO数量1.11 确定外设的供电和功耗1.12 确定外设GPIO的种类1.13 确定ADC的数量1.14…...

编程日记 2025/8/16 9:51:39

第6关：牛牛鱼缸-附加题

任务描述本关任务：问题描述：牛牛有一个鱼缸，鱼缸里面已经有n条鱼，每条鱼的大小为fishSizei，牛牛现在想把新捕捉的鱼放入鱼缸。鱼缸里存在着大鱼吃小鱼的定律。经过观察，牛牛发现一条鱼A的大小为另外一条鱼…...

编程日记 2025/8/17 16:14:09

go中间件学习

本博文源于笔者正在学习go中间件，罗列了较为常用的中间件，例如日志记录、认证授权、跨域资源共享、请求体解析、静态文件处理、错误处理、性能分析、速率限制、session 1、日志记录中间件可以追加打印用，例如，将请求进行打印 …...

编程日记 2025/8/15 21:32:31

若依RuoYi-Cloud-Plus微服务版（完整版）前后端部署

一.目标在浏览器上成功登录进入二.源码下载后端源码：前往Gitee下载页面(https://gitee.com/dromara/RuoYi-Cloud-Plus)下载解压到工作目录。前端源码： 前往Gitee下载页面(https://gitee.com/JavaLionLi/plus-ui)下载解压到工作目录。文档地址&a…...

编程日记 2025/8/16 9:46:44

航空电动力系统适航标准要点手册

航空电动力系统适航标准要点手册 1.标准制定背景与必要性1.1 为什么需要制定和遵循标准？1.2 标准制定依据与发布机构 2.关键核心标准概述2.1 电动航空与电推进系统2.2 混合动力系统2.3 硬件与通用要求 3.标准详细解读与应用场景3.1 DO-160G：环境适应性测…...

编程日记 2025/8/17 21:58:26

深入理解JavaScript构造函数与原型链：从原理到最佳实践

一、开篇：为什么需要理解原型链？ 在JavaScript开发中，90%以上的"诡异"bug都与原型链机制相关。理解构造函数与原型链的运行原理，不仅能帮助我们写出更优雅的代码，还能在框架源码阅读、性能优化等场景中游刃…...

编程日记 2025/8/16 9:46:45

java每日精进 3.12 【WebSocket进阶】

基于 SpringWebSocket 进行二次封装，实现了更加简单的使用方式。例如说，WebSocket 的认证、Session 的管理、WebSocket 集群的消息广播等等。 1. 用户认证与登录用户信息传递 1.1 Token 过滤器 (TokenAuthenticationFilter) ① 在 WebSocket 连接建立…...

编程日记 2025/8/16 12:39:52

国家网络安全事件应急预案

目录 1 总则 1.1 编制目的 1.2 编制依据 1.3 适用范围 1.4 事件分级 1.5 工作原则 2 组织机构与职责 2.1 领导机构与职责 2.2 办事机构与职责 2.3 各部门职责 2.4 各省（区、市）职责 3 监测与预警 3.1 预警分级 3.2 预警监测 3.3 预警研判…...

编程日记 2025/8/16 11:32:56

Markdown：Mermaid 画图

目录安装基本语法流程图时序图甘特图总结 Mermaid 是一款用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它可以将简单的文本描述转化为美观的图表，方便开发者进行可视化展示。安装 Mermaid 可以直接在浏览器中使用，也可以在 Node.js 环境中…...

编程日记 2025/8/18 5:40:05

【视频】ffmpeg、Nginx搭建RTMP、HLS服务器

1、源码安装Nginx 1）源码下载因为要使用Nginx的模块nginx-rtmp-module，所以要下载 nginx 和 nginx-rtmp-module 的源码。下载地址： http://nginx.org/en/download.html https://github.com/arut/nginx-rtmp-module/tags2）解压、配置在同一个目录中解压 nginx 和 nginx…...

编程日记 2025/8/17 18:14:44

时间有限，如何精确设计测试用例？5种关键方法

精确设计测试用例能够迅速识别并修复主要缺陷，确保产品质量，降低后期维护成本，并通过专注于核心功能来提升用户体验，为项目的成功奠定坚实基础。若未能精确设计测试用例，可能会导致关键功能测试不充分，使得…...

编程日记 2025/8/16 11:09:44

【算法】图论

⭐️个人主页：小羊 ⭐️所属专栏：Linux 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录持续更新中...1、DFS2、BFSN 叉树的层序遍历二叉树的锯齿形层序遍历二叉树最大宽度 3、多源BFS腐烂的苹果 4、拓扑排序持续更新中…...

编程日记 2025/8/16 12:41:48

ADQ32 5G采集卡

ADQ32是一款高端12位双通道数据采集板，针对高通量科学应用进行了优化。ADQ32具有以下特性: 一个和两个模拟输入通道包括每通道5和2.5 GSPS7GB/s的持续数据传输速率至GPU7GB/秒的持续数据传输速率两个外部触发器通用输入/输出（GPIO）开放式FPG…...

编程日记 2025/8/16 9:46:47

机器人领域专业名词汇总

1. 电机与驱动电机类型 DC Motor（直流电机）：通过直流电源驱动的电机。Stepper Motor（步进电机）：通过脉冲信号控制旋转角度的电机。Servo Motor（伺服电机）：带有反馈控制的…...

编程日记 2025/8/17 12:30:20

拆解 “ES 已死“ 伪命题：Agentic RAG 时代搜索引擎的终极形态

作者：来自 Elastic 李捷 xxx：“ES已死，#%#……” 我：？？？ 最近，某厂商发了一堆公关文章，翻来覆去地炒作 “ES 已死”，“放弃 ES”。这哪是什么正经的技术文章&…...

编程日记 2025/8/18 6:15:11

eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍

路由器常见接口的详细介绍及其应用示例： 1. CON/AUX 接口全称：Console/Auxiliary（控制台/辅助接口）作用： CON（Console）：通过命令行界面（CLI）直接配置路由器…...

编程日记 2025/8/16 12:00:08

平面的四种方程及一些应用

平面的四种方程及一些应用点法式方程一般式方程三点式方程截距式方程一些应用已知平面方程，找出平面上不共线的三个点点法式方程平面经过点 ( x 0 , y 0 , z 0 ) (x_0,y_0,z_0) (x0,y0,z0)且法向量为 ( a , b , c ) (a,b,c) (a,b,c)，则平面的点…...

编程日记 2025/8/18 10:17:30

记录一个SQL自动执行的html页面

在实际工作场景中，需要运用到大量SQL语句更新业务逻辑，对程序员本身，写好的sql语句执行没有多大问题（图1），但是对于普通用户来说还是有操作难度的。因此我们需要构建一个HTML页面（图2&#xff0…...

编程日记 2025/8/16 11:18:00

SpringBoot——Maven篇

Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的工具。它具有许多特性，其中一些重要的特性包括： 1. 自动配置：Spring Boot 提供了自动配置的机制，可以根据应用程序的依赖和环境自动配置应用程序的各种组件&#xff…...

编程日记 2025/8/16 12:21:55

数据批处理（队列方式）

数据批处理（队列方式） public class DataProcessor {private static final int THREAD_COUNT 4;private static final int QUEUE_SIZE 10;private LinkedBlockingQueue<Data> queue new LinkedBlockingQueue<>(QUEUE_SIZE);public DataP…...

编程日记 2025/8/16 9:53:47

从零开始搭建搜索推荐系统（五十四）多路召回之万剑归宗

聊的不止技术。跟着小帅写代码，还原和技术大牛一对一真实对话，剖析真实项目筑成的一砖一瓦，了解最新最及时的资讯信息，还可以学到日常撩妹小技巧哦，让我们开始探索主人公小帅的职场生涯吧！ （PS…...

编程日记 2025/8/18 6:58:35

c++介绍函数指针十

指针代表内存中地址标识符，变量，数组都是存储内存中的数据。所以可以获得它们的地址，用指针来表示这块内存。如图输出内存中的地址。对于一个函数来说，也是内存中存储这段数据，所以我们也可以获取函数的地址。函数…...

编程日记 2025/8/18 10:50:44

redis数据库

一、redis数据库介绍 NoSQL Not Only SQL 非关系型数据库 1、关系型数据库与非关系型数据库的区别非关系型数据库性能高、速度快、支持高并发连接 1、非关系型数据库基于内存存储数据 2、摒弃了关系型数据的约束限制 3、采用o1算法进行设计开发 2、作用关系型数…...

编程日记 2025/8/16 12:53:56

关于 NoC 中数据安全传输的设计与实现的详细介绍

片上网络（Network-on-Chip，NoC）作为一种新兴的片上通信架构，解决了传统总线架构在大规模集成电路设计中面临的诸多问题。然而，随着芯片系统的复杂性和应用场景的多样化，NoC 中数据安全传输变得至关重要。以…...

编程日记 2025/8/17 9:54:36

OpenGL（4）着色器

文章目录一、着色器1、什么是着色器？2、着色器类型2.1、顶点着色器（Vertex Shader）2.2、片段着色器（Fragment Shader） 3、着色器属性3.1、layout 属性3.2、in 属性3.3、out 属性3.4、总结 4、示例前言： 在…...

编程日记 2025/8/16 9:46:55

PHP批量去除Bom头的方法

检查的代码： <?php$dir __DIR__; $files new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));foreach ($files as $file) {if ($file->isFile() && pathinfo($file, PATHINFO_EXTENSION) php) {$content file_get_contents(…...

编程日记 2025/8/16 9:46:54

51单片机的keil c51软件安装教程

Keil（C51）介绍、下载、安装与注册_keil c51-CSDN博客参考安装不一定是这个大小，也可以下载别的版本KEID C51 注册加入芯片型号 …...

编程日记 2025/8/16 12:30:58

JavaScript基本知识

文章目录一、JavaScript基础1.变量（重点）1-1 定义变量及赋值1-2 变量的命名规则和命名规范判断数据类型： 2.数据类型转换2-1 其他数据类型转成数值2-2 其他数据类型转成字符串2-3 其他数据类型转成布尔 3.函数3-1函数定义阶段3-2函数调用阶段…...

编程日记 2025/8/17 17:59:59

导数，积分及常用公式

导数定义： 求导是数学计算中的一个计算方法，它的定义就是，当自变量的增量趋于零时，因变量的增量与自变量的增量之商的极限。在一个函数存在导数时，称这个函数可导或者可微分。可导的函数一定连续。不连续的函数一定…...

编程日记 2025/8/16 9:48:57

鸿蒙应用开发—ZDbUtil高效使用数据库

文章目录介绍下载安装基本使用注解TableIdColumnOneToOne 使用方法定义实体类初始化数据库并根据被Table注解的类创建表创建表查数据插入数据删除数据清空数据参考介绍 ZDbUtil是一款基于SQLite的鸿蒙数据库框架，通过注解标注实体类与属性，让数据更能…...

编程日记 2025/8/17 21:22:50

强化学习（赵世钰版）-学习笔记（7.时序差分学习）

本章是课程算法与方法中的第四章，介绍的时序差分学习算法是基于随机近似方法设计的强化学习方法，也是model-free的方法。时序差分算法是一种近似估计策略状态值的算法，具体的形式如下： 本质上是在当前t时刻，被访问到的…...

编程日记 2025/8/16 9:46:58

正则表达式入门及常用的正则表达式

正则表达式（Regular Expression，简称 Regex）是一种强大的文本处理工具，用于匹配、查找和替换字符串中的特定模式。以下是入门指南和常用正则表达式示例： 一、正则表达式入门 1. 基本语法符号说明示例.匹配任意单个字…...

编程日记 2025/8/16 12:47:01

大白话如何在 Vue 项目中进行路由懒加载？

大白话如何在 Vue 项目中进行路由懒加载？ 在 Vue 项目里，路由懒加载是种很实用的技术，它能让你在需要的时候再去加载对应的路由组件，而不是在项目启动时就把所有组件都加载进来，这样能加快项目的启动速度。下面就详细…...

编程日记 2025/8/15 15:30:26

手动实现一个RTTI系统

在 C 中，RTTI（Runtime Type Information，运行时类型信息）是一组允许程序在运行时获取对象类型信息的机制。虽然C通过虚接口的方式提供了良好的抽象，但是对于一个复杂的系统，过于依赖抽象而忽略业务的复杂性…...

编程日记 2025/8/16 11:48:41

智能化水利监管：无人机视频在违章行为识别中的应用

随着我国经济社会的快速发展，水利工程建设规模不断扩大，但随之而来的违章建设行为也日益增多。传统的人工巡查方式效率低下，难以满足当前监管需求。无人机技术以其灵活性和高效性，为水利工程建设监管提供了新的解决方案。本文将探…...

编程日记 2025/8/17 16:05:16

力扣练习之确定两个字符串是否接近

目录题目： 题解： 详细题解题目： 如果可以使用以下操作从一个字符串得到另一个字符串，则认为两个字符串接近 ： 操作 1：交换任意两个现有字符。例如，abcde -> aecdb 操作 2&#xff1…...

编程日记 2025/8/17 14:36:56

Word 小黑第21套

对应大猫22 设置表格为页面的80%：表布局 -属性 -表格指定宽度80% 度量单位改成百分比段落组 -中文版式在表格上下方留一行空段（如果表格太大改一下样式）插入横线边框线 （右击横线 -图片修改样式） 段落 -取消对于…...

编程日记 2025/8/16 12:32:07

mingw32编译ffmpeg

ffmpeg https://gitee.com/mirrors/ffmpeg.git 使用msys2的mingw32 pacman -S mingw-w64-x86_64-toolchain compile ./confiure --enable-static --disable-shared --enable-gpl --target-oswin32 mingw32-make -j4 提示编译错误，msys2里面的路径是/d/tools/msys2…...

编程日记 2025/8/16 9:53:29

设计模式C++

针对一些经典的常见的场景, 给定了一些对应的解决方案，这个就叫设计模式。设计模式的作用：使代码的可重用性高，可读性强，灵活性好，可维护性强。设计原则： 单一职责原则：一个类只做一方面的…...

编程日记 2025/8/18 5:25:56

Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析

一、框架演变：从Vue2到Vue3的跨越

1.1 革命性升级

1.2 兼容性设计

二、架构革新：Monorepo与原子化设计

2.1 模块化重构

2.2 TypeScript转型

三、性能优化四大支柱

3.1 API精简策略

3.2 Tree-shaking优化

3.3 响应式系统重构

3.4 底层优化

四、编译时优化：智能的模板编译

4.1 静态分析

4.2 Block Tree机制

五、核心源码解析

5.1 响应式系统实现

5.2 虚拟DOM优化

六、框架对比总结

七、手写响应式系统实现

结语

相关文章：