vue2和vue3的区别详解

vue2 VS vue3

对比	vue2	vue3
配置脚手架	cmd命令行	可视化方式创建脚⼿架
组件通信	props、$emit、provide、$arrts、EventBus等	props、$emit、provide、inject、arrts等
数据监听	watch,computed	watch,watchEffect,computed
双向绑定	Object.defineProperty	ProxyAPI
⽣命周期	四个阶段	beforeCreate 和created—>setup
api	选项式Options API	组合式Composition API

双向数据绑定原理

vue2 的双向数据绑定是通过ES5的⼀个API，Object.defineProperty()对数据进⾏劫持，结合发布订阅模式的⽅式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法，当获取数据的时候，调用get方法，修改data中的数据的时候调用set方法，通过watcher监听器去更新视图，完成数据的双向绑定。

vue3 中使⽤了ES6的ProxyAPI对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽实现对数据的监控。

相对于Object.definePropery()有以几个优点：1.Proxy直接代理整个对象而非对象属性，这样只需要做一层代理就可以监听同级结构下的所有属性变化， 包括新增属性和删除属性。 2.Proxy可以监听数组的变化。

生命周期对比

vue2生命周期	vue3生命周期	描述
beforeCreate()	已去掉setup代替	创建阶段
Created()	已去掉setup代替
beforeMount()	onBeforeMount	挂载阶段
mounted()	onMounted
beforeUpdate	onBeforeUpdate	更新阶段
updated	onUpdated
beforeDestroy	onBeforeUnmount	销毁阶段
destroved	onUnmounted

建立数据发生了变化

        vue2把数据放在data中，vue3把数据放在setup中。

是否支持碎片化

        vue2.0只允许有一个根标签，vue3.0支持碎片化，可以拥有多个根节点。

Vue2
<template><div><header></header><main></main><footer></footer></div>
</template>

Vue3
<template><header></header><main></main><footer></footer>
</template>

组件通信

• props通信
  • vu3 父传子                  
  • vue2父传子

    1.定义数据 
    data(){return{goodsList:[{id:1,name:'方便面',price:2.5,info:'好吃不贵'},{id:2,name:'火腿肠',price:2,info:'价钱合理'},{id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},]}},2.放到模板的子组件中
    <MyTest :item="goodsList[1]"></MyTest>3.子组件props接收export default {//接收数据props:['item']}

  • vue3子传父​