Vue3 源码揭秘：大佬为什么能秒懂？

源码讲解

Vscode安装插件

es6不能本地之间运行，需要node服务，否则跨域。

Vnode

shapFlag

export const enum ShapeFlags {
    // 最后要渲染的 element 类型
    ELEMENT = 1,
    // 组件类型
    STATEFUL_COMPONENT = 1 << 2,
    // vnode 的 children 为 string 类型
    TEXT_CHILDREN = 1 << 3,
    // vnode 的 children 为数组类型
    ARRAY_CHILDREN = 1 << 4,
    // vnode 的 children 为 slots 类型
    SLOTS_CHILDREN = 1 << 5
  }

shapeFlag中的位运算

instance组件实例

setup的执行

会在前后修改全局instance的状态，执行结束清掉

setup返回值的处理

如果是函数就挂载到instance的render上

如果是对象，就挂载到 setupResult上

面试题（补充）

1. vue3中setup组件有实例吗？

有的。

2. vue和react的区别？

vue3的setup组件有实例，

react函数式组件是没有实例的，只有class组件才有

3. setup返回的render函数优先级高于templlate

4. vue的初始化过程？

核心流程是patch，然后Patch有一个分支，分别处理组件和浏览器原生标签。分别对应processElement和processComponent，从上到下插入，知道处理完成，才把顶层div插入到浏览器。“一次性渲染，而不是一个个一个渲染”

5. vue3中如果给ref传入对象，发生了什么？

其实就是创建reactive

6. vue3中ref是get怎么收集依赖的

ref实例化中会有一个dep属性，它是一个set数据结构

dep会把effect对象收集进去

同时effect会把dep收集自己的deps属性中，deps是一个数组

7. ref的set做了什么事情？

遍历ref实例中的dep set数据结构，里面是effect，执行effect.scheduler,在微任务中进行更新

8. reactive的初始化过程

创建一个weakMap, 对象作为key， 这个对象的代理对象作为值

然后注入 get和set的Handler

9. reactive是怎么get收集依赖的

reactive（target1）

红： 以target1为key，生成一个weakmap，depsmap为值

黄： 以target1对象的属性为key，生成一个depsmap，dep set为值

蓝： 蓝色部分就是set数据结构，通过dep set和effect进行双向收集

10. reative触发set的流程

去targetMap中读取一个set，set中存储的就是这个对象的属性对应，收集的effect对象。

然后对effect对象进行遍历，执行effect.scheduler在微任务中更新