# VUE3源码学习

**Repository Path**: rongchase/vue3-source-code-learning

## Basic Information

- **Project Name**: VUE3源码学习
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-16
- **Last Updated**: 2025-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3源码

## README

# 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 不同）需要重新收集依赖，将不需要的移除掉