Vue3.5正式上线,父传子props用法更丝滑简洁

前言

Vue3.52024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性说一下props两个小改动使我们日常使用更加灵活。

一、带响应式Props解构赋值

简述: 以前我们对Props直接进行解构赋值是会失去响应式的,需要配合使用toRefs或者toRef解构才会有响应式,那么就多了toRefs或者toRef这工序,而最新Vue3.5版本已经不需要了。

这样直接解构,testCount能直接渲染显示,但会失去响应式,当我们修改testCount时页面不更新。

保留响应式的老写法,使用toRefs或者toRef解构

最新Vue3.5写法,不借助”外力“直接解构,依然保持响应式

相比以前简洁了真的太多,直接解构使用省去了toRefs或者toRef

二、Props默认值新写法

简述: 以前默认值都是用default: ***去设置,现在不用了,现在只需要解构的时候直接设置默认值,不需要额外处理。

先看看旧的default: ***默认值写法

如下第12就是旧写法,其它以前Vue2也是这样设置默认值

最新优化的写法 如下第9行,解构的时候直接一步到位设置默认值,更接近js语法的法写。

小结

这次更新其实props的本质功能并没有改变,但写法确实变的更加丝滑好用了,props使用非常高频感觉还是有必要跟进这种更简洁的写法。如果那里写的不对或者有更好建议欢迎大佬指点啊。

原文链接:https://juejin.cn/post/7410333135118090279

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值