vue2和vue3的区别

目录

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

二、vue3支持碎片化（Fragment）

三、vue2和vue3选用api不同（v2和v3最大的不同点）

四、建立数据的方式

五、生命周期函数不同

六、父子传参方式不同

七、vue3新增了（teleport）瞬移新特性

---

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

vue2:vue2的数据双向绑定原理使用的是es5的数据劫持object.defineProperty配合发布订阅模式来实现
    优点：兼容性相对好
vue3:通过proxy的api（Reflect）实现
    优点：可以直接监听对象而非属性，可以直接监听数组的变化, 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的；

二、vue3支持碎片化（Fragment）

组件中有多个根节点

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

三、vue2和vue3选用api不同（v2和v3最大的不同点）

vue2：采用选项式 API (Options API)，

 在 vue2.x 项目中使用的就是 选项API 写法

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

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

缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

虽然提供了 mixins（混入） 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护

vue3：组合式 API (Composition API)，

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

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

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

缺点：需要有良好的代码组织能力和拆分逻辑能力 

vue3支持选项式api和组合式api

四、建立数据的方式

vue2：数据放在data中

vue3：需要使用setup()方法，使用该方法需要引入

五、生命周期函数不同

//vue2选择式                   //vue3选择式                     //vue3组合式
beforeCreate                  beforeCreate                     setup =beforeCreate+ created
created                       created                          setup
beforeMount                   beforeMount                      onBeforeMount
mounted                       mounted                          onMounted
beforeUpdate                  beforeUpdate                     onBeforeUpdate
updated                       updated                          onUpdated
beforeDestroy                 beforeUnmount                    onBeforeUnmount
destroyed                     unmounted                        onUnmounted

六、父子传参方式不同

vue2：

父传子：props，

子传父：$emit

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

七、vue3新增了（teleport）瞬移新特性