vue-vue2和vue3的区别

核心区别

• 用Composition API代理Options API
• 体积更小
• 数据响应式的区别
• diff算法优化
• 静态提升
• 事件监听缓存
• SSR优化
• 部分新特性

1、用Composition API代理Options API

• 逻辑的独立分离，更好阅读和维护
• 更少的代码量

2、体积更小

• vue2导入的是整个vuejs，而vue3可以按需导入
• 通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的能够tree-shaking；

3、数据响应式的区别

• Vue2是通过 Object.defineProperty来完成响应式处理，遍历对象所有的property，并将其转化getter/setter，由于是递归实现监听，如果数据层级较多，会导致初始化时间过长，而且原生不支持监听数组，对象中新增的key无法获取相应性，通过数组下标改变数据时，也无法触发响应式，可通过 $set重新绑定，恢复响应性
• Vue3分为（1）值类型响应式比较简单，直接对该对象设置set和get的方法（ref），获取value；（2）复杂类型响应式是通过使用Proxy和Reflect来完成的响应式处理，也是出来set和get；优点：速度快，只有get数据是才会添加响应式，不用初始化时深层次递归，可以检测到代理对象属性的动态添加和删除，可以检测到数组的下标和length属性的改变，且Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的

4、diff算法优化

• vue2比较的过程是全量的比较，也就是每个节点都会彼此比较。有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。
• 在Vue3.0当中，就对这部分内容进行了优化：在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。

5、静态提升

• Vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，这样就可以免去了重复的创建节点

6、事件监听缓存

• 默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没必要去追踪它的变化，想办法将它直接缓存起来复用就会提升性能。因此要打开事件监听缓存，这样静态标记就不存在了，这部分内容也就不会进行比较了。

7、SSR优化

• 当静态内容达到一定量级的时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会直接innerHtml，就不需要创建对象，然后根据对象渲染

8、部分新特性

• framents：在 Vue3.x 中，组件现在支持有多个根节点
• Teleport：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
• createRenderer：vue3通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台