VUE3 源码学习

介绍

Vue源码 学习

软件架构

软件架构说明

安装教程

1. npm install
2. npm run dev

使用说明

vue3 原理主要包括响应式，底层主要涉及到 reactive 及副作用 effect。
注意：组件、watch、computed等 都是基于 effect 来实现

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

reactive 主要优化点：

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

effect 副作用主要优化点：

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