vue2与vue3的区别

- vue2与vue3双向绑定数据的原理不同
vue2双向数据绑定采用了es5中Object.defineProperty() 对数据进行了劫持,结合发布订阅模式实现
vue3 采用了es6中的proxy代理对象的方式进行数据交互,相较vue2来说大大的提高了效率
2- vue3支持碎片(Fragments)
支持多个根节点
3- Composition API
Vue2 与vue3 最大的区别是vue2使用选项式api,对比vue3组合式api。旧得选项型api在代码里分割了不同得属性:data,computed,methods等;新得组合式api能让我们使用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁
4-建立数据data
vue2是把数据放入data中,vue3就需要使用一个新的setup()方法
备注:此方法在组件初始化构造得时候触发。使用一下三个步骤来建立反应性数据:
1. 从vue引入reactive;
2. 使用reactive() 方法来声明数据为响应性数据;
3. 使用setup()方法来返回我们得响应性数据,从而template可以获取这些响应性数据。
5- 生命周期
vue2     --------------- vue3
beforeCreate       ->   setup()
Created            ->   setup()
beforeMount        ->   onBeforeMount
mounted            ->    onMounted
beforeUpdate       ->    onBeforeUpdate
updated            ->    onUpdated
beforeDestroyed    ->    onBeforeUnmount
destroyed          ->     onUnmounted
activated          ->     onActivated
deactivated        ->     onDeactivated
--------------------------------------------------------------------
beforeCreate 和 created 已经合并成一个新的函数 setup。
deactivated 和 activated 已经被废弃,取而代之的是 beforeMount 和 beforeUpdate。因为在Vue3中,keep-alive组件被完全重写了,其默认行为现在与没有keep-alive一样。
6- 父子传参不同
父传子,用props,子传父用事件 Emitting Events。
在vue2中,会调用this$emit然后传入事件名和对象;
在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
7- 新增setup()函数特性
————————————————
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值