vue3和vue2的区别

1.源码组织方式发生变化，采用 monorepo 的方式组织源码，任何一个单一模块都可以独立抽出来使用，比如 @vue/reactivity 可以单独提供响应式功能

2.vue2使用的是 optionsAPI，Vue3使用的是 compositionAPI（vue2.7也支持了compositionAPI）

3.响应式原理改变，vue2响应式原理是 object.defineProperty()，vue3是 proxy

4.Vue3支持 fragment，组件可以拥有多个根节点

5.性能提升

• 使用 proxy 替换 object.defineProperty 重写响应式代码。不必像vue2一样需要遍历每一个属性，为所有属性添加getter和setter，通过proxy，只需要在入口处理一次即可，同时还可以监听到属性的增减，也可以监听数组的index。为子对象添加监听放到了获取时，而不是初始化的时候，极大提高了初始化效率。（如果获取子对象，不添加proxy，会导致获取的子对象丢失响应式）
• diff算法优化。vue2中数据发生变化，会重新生成一个DOM树，并和之前的DOM树进行比较,找到不同的节点然后更新。但这比较的过程是全量的比较，也就是每个节点都会彼此比较。但其中很显然的是，有些节点中的内容是不会发生变化的，那我们对其比较就多消耗了时间。在vue3中，在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。
• 在vue2中，无论元素是否参与更新，每次都会重新创建，然后再渲染。在vue3中使用了静态提升，对于不参与更新的元素，只会被创建一次，在渲染时直接服用即可。
• 默认情况下，onclick 等静态事件会被视为动态绑定，所以每次都会去追踪它的变化，但因为是同一个函数，所以是没有必要的。vue3中开启了 cacheHandlers，再次调用时，不会再从组件中取，而是直接走缓存取缓存。

6.增加了vite（vue2也可以使用）

• 基于ESM，使用golang编写，极大提高效率
• 快速冷启动
• 按需编译
• 带有模块热更新