VUE2和VUE3的区别

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

Vue2：

        通过使用ES5中的一个API "Object.defineProperty" 结合发布订阅模式来对数据进行双向绑定的【 Object.defineProperty(目标对象,属性名,修饰符) 】，而"Object.defineProperty"的主要作用就是用来劫持某一个对象的属性。 可是 Object.defineProperty 必须遍历所有的预值才能劫持每一个属性，而且如果属性值是对象，还需要继续深度遍历。

 Vue3：

        为了解决以上缺点，Vue3 利用 ES6 中的 "Proxy(代理)" 对数据进行响应式处理。proxy 可以直接监听对象而不是它的属性。可以劫持整个对象，返回的也是新对象，同时也可以监听整个数组的变化。

2.是否支持碎片化

Vue2：

        vue2不支持碎片化（template 里只能有一个" div "）

Vue3：

        vue3支持碎片（Fragments），就是说可以拥有多个根节点（可写多个div）。

3.定义数据变量和方法不同

vue2：

        vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

vue3：

        vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

• 从vue引入reactive；
• 使用reactive() 方法来声明数据为响应性数据；
• 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

4、生命周期钩子函数不同

vue2：vue2中的生命周期：

• beforeCreate 组件创建之前
• created 组件创建之后
• beforeMount 组价挂载到页面之前执行
• mounted 组件挂载到页面之后执行
• beforeUpdate 组件更新之前
• updated 组件更新之后

vue3：vue3中的生命周期：

• setup 开始创建组件
• onBeforeMount 组价挂载到页面之前执行
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate 组件更新之前
• onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外，vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

5.父子传参不同

vue2：

        父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this.$emit然后传入事件名和对象。

                1.在子组件中定义一个带有语句this.$emit('方法函数', "改变后的值");方法。

                2.父组件通过@键="改变参数值=$event" 接收参数。

vue3：

        父传子，用props,子传父用事件 Emitting Events。在vue3中没有 "this" ，而setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法里面使用了。

6.API类型不同

vue2：

        vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。

vue3：

        vue3使用合成型api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

7、指令与插槽不同

vue2：

        vue2中使用slot可以直接使用slot；

        v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：

        vue3中必须使用v-slot的形式；

        vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突（此时优先级 v-if > v-for）；

        vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；

        vue3中移除v-on.native修饰符；

        vue3中移除过滤器filter。

8、main.js文件不同

vue2：

        vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。

vue3：

        vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。