#014#vue3响应式源码结构

前言

日志，各位看官就当乐子看吧。

正经人谁写日记啊？！！ ——鹅城县长

今天想进一步查看vue创建应用实例的流程，比如怎么实现响应式的、如何构建VNode的。。。下载了vuejs核心代码。主要看了响应式内容，其他问题参考文章中没写到，我自己看源码，一头雾水，没找到源头。

Vue3源码

原文：学习Vue源码

文件中有个packages文件夹存放源代码，我们直接看这其中的目录结构：

// packages 文件夹
.
├── compiler-core // 顾名思义，核心中的核心，抽象语法树和渲染桥接实现
├── compiler-dom // Dom的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr
├── global.d.ts
├── reactivity
├── runtime-core
├── runtime-dom
├── runtime-test
├── server-renderer // 服务端渲染实现
├── shared  // package 之间共享的工具库
├── size-check
├── template-explorer
└── vue

核心就是compiler-core、compiler-dom、runtime-core、runtime-dom、reactivity

compiler-*主要完成类似将.vue -> .html的工作。runtime-*即是程序被编译了之后，打开程序并运行它直到程序关闭的这段时间的系列处理

模块关系图

                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

响应式系统

源码在reactivity文件夹下，再看看其中的结构：

// reactivity 文件夹
.
├── LICENSE
├── README.md
├── __tests__  // 单元测试目录
│   ├── collections
│   │   ├── Map.spec.ts
│   │   ├── Set.spec.ts
│   │   ├── WeakMap.spec.ts
│   │   └── WeakSet.spec.ts
│   ├── computed.spec.ts
│   ├── effect.spec.ts
│   ├── reactive.spec.ts
│   ├── reactiveArray.spec.ts
│   ├── readonly.spec.ts
│   └── ref.spec.ts
├── api-extractor.json
├── index.js
├── package.json
└── src
    ├── baseHandlers.ts // 基本类型的处理器
    ├── collectionHandlers.ts  // Set Map WeakSet WeckMap的处理器
    ├── computed.ts // 计算属性，同Vue2
    ├── effect.ts // reactive 核心，处理依赖收集，依赖更新
    ├── index.ts
    ├── operations.ts // 定义依赖收集，依赖更新的类型
    ├── reactive.ts // reactive 入口，内部主要以Proxy实现
    └── ref.ts // reactive 的变种方法，Proxy处理不了值类型的响应，Ref来处理

主要看reactive.ts、baseHandlers.ts、effect.ts、ref.ts 和 computed.ts。并且建议按照这个顺序阅读。有个流程图方便大家理解。

我看到effect的解析，然后就看不下去了，不知道代码具体在干嘛。之后再找找其他人写的博客。

彩蛋

设想的结果太完美，预计自己做不好一件事，就会倾向于逃避完成。负反馈的完美主义，真不行呐！