Vue2和Vue3的区别和变化

vue2和vue3数据双向绑定原理发生改变

vue2:vue2的数据双向绑定Q 原理使用的是es5的数据劫持obiect.defineProperty配合发布订阅模式来实现

优点:兼容性相对好

vue3 :通过proxy的api (Reflect) 实现

优点: 可以直接监听对象而非属性，可以直接监听数组的变化,有多达 13 种兰截方法,不限于apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的:

vue3支持碎片化 (Fragment)

组件中有多个根节点

优点: 减少标签层级，减少内存占用

vue2和vue3选用api不同 (v2和v3最大的不同点)

vue2: 采用选项式 API(Options API),在 vue2x 项目中使用的就是 选项API 写法

代码风格: date选项写数据，methods选项写函数，一个功能逻辑的代码分散

优点: 易于学习和使用，写代码的位置已经约走好了

缺点: 代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读虽然提供了 mixins (混入) 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护

vue3: 组合式 API(Composition API)

在 vue3 中使用的就是 组合API 写法

代码风格: 一个功能逻辑的代码组织在一起，包括据，函数、

优点: 功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

缺点: 需要有良好的代码组织能力和拆分逻辑能力vue3支持选项式api和组合式api

建立数据的方式

vue2:数据放在data中

vue3:需要使用setup方法，使用该方法需要引入

生命周期函数不同

去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup

beforeMount 挂载之前 改名 onBeforeMount，mounted 挂载之后 改名 onMounted

beforeUpdate 数据更新之前 改名 onBeforeUpdate，updated 数据更新之后 改名 onUpdated

beforeDestroy 销毁前 改名 onBeforeUnmount,可在此进行清除定时器，进行事件监听，发布订阅。

destoryed 销毁后 改名 onUnmounted，errorCaptured 报错 改名 onErrorCaptured

父子传参方式不同

vue2:父传子: props,子传父: $emit

vue3: setup(函数特性，vue3还给我们提供了provide和inject，我们可以在父组件中通过provide暴露属性或方法，子组件通过iniect接受，并且只要是父组件的后代，都可以通过iniect接收到父组件暴露的值

vue3新增了 (teleport) 瞬移新特性