vue3初体验

vue3初体验

1 通过monorepo搭建 所有模块都在packages中

2 vue分为了上下两部分

上面为编译时

下面为运行时

如图：

注意：

compiler-sfc将.vue的文件编译成js文件，浏览器才能执行(依赖于compiler-dom,compiler-core)
compiler-dom将template转化为render函数(依赖于compiler-core)
runtime-dom如图是依赖于后面的runtime-core和reactivity的，很多vue中的api都是由runtime-core中export出来的

reactivity的核心流程

1 首先 reactive

创建响应式对象：reactive - createReactiveObject 通过new Proxy包裹，proxy中最主要的就是Handlers，主要通过baseHandlers来实现。

get createaGetter 1.1 Reflect.get() 1.2 track(依赖收集)

set createSetter 1.1 Reflect.set() 1.2 trigger(触发依赖)

2 接着 effect

创建effect对象-执行fn函数-触发get操作-执行track-把effect收集起来作为依赖

3 最后就是 更新update

修改响应式对象的值-触发set操作-执行trigger-重新运行effect函数-执行fn-触发get操作-执行track-把effect收集起来作为依赖 (重新运行effect函数有基本上走了初始化收集依赖的流程)

导图如下