vue2和vue3的区别

内部优化

1.vue2与vue3双向数据绑定原理不同

2.静态变量提升

3.pathFlag 标记

4.缓存事件处理函数

写法优化

1.vue3碎片化，可写多个根节点

2.api 不同 选项型 vue2: opsition api 组合型 vue3: composition api

3.数据存储方式不同 vue2:data vue:ref reactive

1.vue2与vue3双向数据绑定原理不同

vue2 是利用es5的object.defineProperty对数据进行劫持结合发布订阅模式实现的
vue3是利用es6的proxy API 对数据进行的一个代理
细分

1. diff 算法优化，新增PatchFlag标记 只比较带有静态标记的节点
   2.静态提升 vue3中对于不参与更新的元素会做静态提升，只会创建一次，在渲染的时候复用即可
   3.事件监听缓存 默认情况下会给函数打一个静态标记 patchflag:8，表明这是个函数，会进行缓存

2.vue3支持碎片

就是在组件中可以放置多个根节点

3.vue3中采用composition API

vue2:采用的选项型API(opsition API)
vue3:采用的合成型API(composition API

4.建立的数据方式不同

vue2:数据是放置在data属性中
vue3:需要使用setup 方法，该方法在初始化构造的时候触发
注：ref:需要value 访问，内部还是使用的defineProperty set get 方法进行监听（proxy 不支持基本类型的监听）
reactive: 使用的proxy对数据进行的一个代理

5.声明周期函数不同

vue2:
beforeCreate （初始化前）
created （初始化完成）
beforeMount（挂载前）
mounted （挂载完成）
beforeUpdate （更新前）
updated （更新完成）
beforeDestory （销毁前）
distoryed（销毁完成）
activeted(页面缓存执行)
deactiveted(页面缓存)

vue3:
setup();
onBeforeCreate （初始化前）
onCreated （初始化完成）
onBeforeMount（挂载前）
onBMounted （挂载完成）
onBeforeUpdate （更新前）
onUpdated （更新完成）
onBeforeUnmount （销毁前）
onUnmount（销毁完成）
onActiveted(页面缓存执行)
onDeactiveted(页面缓存)

6.传参方式不同，由vue3 setup()特性决定的

7.vue3新增的Teleport瞬移组件