vue2和vue3的区别

1.vue2vue3响应式原理不同
2.vue3支持碎片，vue不支持
3.vue3是组合式API,vue2是选项式API
4.v-if和v-for的优先级不同
5.生命周期不同
6.diff算法不同
7.vue3新增Teleport传送门组件、

1，vue2 vue3 响应式原理不同
vue2 的双向数据绑定是利用 ES5 的一个 APIObject.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
vue3 利用 Proxy 实现数据挟持，创建一个对象的代理，实现基本操作的拦截和自定义。
Object.defineProperty()存在的问题
在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题
2，vue3 支持碎片，vue 不支持
vue3 中组件的 template 下可以包含多个根节点， vue2 中组件的 template 下只能包含一个根节点
3，vue2 是选项式 API，vue3 是组合式 API
vue2 选项式 api 在代码里分割了不同得属性：data,methods,computed 等，同一块业务逻辑会把数据和方法拆分到不同的代码块中，开发式需要不断上下滚动代码，开发很不方便。
vue3 组合式 api 能让相同的业务的数据方法写在同一块代码区域，这样代码会更加简便和整洁
4，v-if 和 v-for 的优先级不同
vue2 v-for 优先于 v-if 生效
vue3 v-if 优先于 v-for 生效

5，生命周期的不同
vue2 -------> vue3

beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
6，diff算法不同
vue2 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。
vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。