这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”

前言

之前面试的时候被问到如何如何从本质上分析vue2和vue3的一些区别，我主要从vue的三大核心模块响应式，运行时，编译器模块进行分析。如有不足之处，欢迎大家补充。

构建方面

1.vue3采用Pnpm实现Monorepo,而原先用的npm和一个整的项目,好处是提升性能;

2.vue3全面拥抱TS,vue2用的是Js写的,好处是避免Js带来的一系列的问题

3.各个模块之间的依赖关系,如下图所示,各个模块之间和vue2大有不同，vue2的运行时和响应式代码在core下面，vue3的依赖图如下，其中响应式和运行时是分开的。

1.vue3采用的是proxy做数据代理，vue2采用的是es5的object.defineproperty做数据拦截，vue2中的方法会出层层递归，会大大的影响性能；与此同时，在vue2里面数组需要做额外的操作；

2.vue3支持更多的数据结构，如map,set,weakmap,weakset; tips:proxy经过bable编译之后还是object.defineproperty

运行时的差别还是很大的，这里我们挑几个比较大的来说明

1.用setup这种组合式api代替原有的选项式api，这样的好处是抽离逻辑复用，让代理看起来更加的清晰，看起来没有那么冗余；

2.生命周期钩子的改变，其中setup就是发生在beforeCreate和created这两个生命果周期里面，但是vue3不在向外面提供这两个接口，实质上在源码里面还是存在的,其他还有一些生命周期的改变，在官网上都有陈述，这里面就不一一赘述了;

3.引入shapeflag并用二进制表示，引入patchflag做静态节点标记从而提升效率 diff算法引入了最长递归子序列的算法;

4.实现自定义渲染器，向外提供一个接口，使之可以运行在多个平台，比如canvas、uniapp; 引入任务调度器，让其可以做一些额外的操作；

5.引入了Fragment，static等类型

1.静态提升

2.做缓存。