从本质上分析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做静态节点标记从而提升效率
4. diff算法引入了最长递归子序列的算法;
5. 实现自定义渲染器，向外提供一个接口，使之可以运行在多个平台，比如canvas、uniapp;
6. 引入任务调度器，让其可以做一些额外的操作；
7. 引入了Fragment，static等类型

编译器模块

1.静态提升
2.做缓存。