README.md · Kayn/VUE3源码学习 - Gitee.com

Gitee 年度开源项目评选中~

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

README.md 1.50 KB

一键复制编辑原始数据按行查看历史

提交于 2025-03-23 18:18 +08:00 . 标记

# VUE3 源码学习

#### 介绍

Vue源码 学习

#### 软件架构

软件架构说明

#### 安装教程

1.  npm install
2.  npm run dev

#### 使用说明

vue3 原理主要包括响应式，底层主要涉及到 reactive 及副作用 effect。<br>
<span style="color:red">**注意：组件、watch、computed等 都是基于 effect 来实现**</span>

reactive 方法主要将对象通过 proxy 生成响应式的代理对象，在获取属性时会对代理对象进行一个依赖收集（主要是记录使用哪些对象，以及对象的哪些属性），并将这些依赖与副作用 effect 进行关联，每当响应式变量属性值改变时，就会执行该对象属性对应收集依赖中的副作用，以此达到页面更新的目的。

reactive 主要优化点：

1. 在生成响应式对象时，若同时用多个 reactive 去代理同一个对象（用 WeakMap 缓存了历史响应式对象），实际上返回的是同一个代理对象
2. 用 reactive 去代理一个以及已经是响应式的对象（此时会判断该对象中是否存在只有响应式变量才有的属性 IS_REACTIVE，若是响应式对象该值会返回 true），此时也只会返回原来的响应式对象

effect 副作用主要优化点：

1. 在依赖收集时也会用 WeakMap 缓存历史依赖，避免在一次副作用执行时生成重复的依赖对照关系
2. 副作用使用\_trackId 记录当前执行的次数，不是同一次执行（\_trackId 不同）需要重新收集依赖，将不需要的移除掉

Loading...

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

1

https://gitee.com/rongchase/vue3-source-code-learning.git

git@gitee.com:rongchase/vue3-source-code-learning.git

rongchase

vue3-source-code-learning

VUE3源码学习

master