Vue3.5与Vue3新功能对比
创始人
2024-09-25 04:49:45

一、props解构,默认值

vue3

const { count = 0, message = 'hello' } = withDefaults(   defineProps<{     count?: number     message?: string   }>(),   {     count: 0,     message: 'hello'   } )

vue3.5 

const { count = 0,message = 'hello'} =  defineProps<{   count?: number;   message?: string; }>()

二、useId

全局唯一id-----一个app内 

const id = useId()

三、useTemplateRef

通过ref获取dom

vue3

const button = ref(null)

vue3.5 

const el = useTemplateRef('button') console.log(el, 'dom')

四、watch新增 onCleanup回调

vue3.5

onCleanup---下一次watch执行前触发---可以在这里移除上一次watch

watch(count, (newVal, oldVal, onCleanup) => {   const handler = () => {     console.log(newVal, 'newVal')   }   addEventListener('click', handler)   onCleanup(() => {     removeEventListener('click', handler)   }) })

完整代码

   

相关内容

热门资讯

创想三维旗舰店开业:行业卷到线... 3D打印行业的线下竞争,终于来到了一个全新高度。 2025年12月,深圳宝安地标“湾区之眼”迎来它最...
2025腾冲科学家论坛开幕 2025腾冲科学家论坛开幕 顾秉林饶子和等百余名院士出席 颁发腾冲科学大奖 宣布腾冲青年科学家奖获奖...
马斯克:希望下个月毫无保留地开... IT之家 12 月 6 日消息,北京时间今天凌晨,马斯克在 X 平台发文透露,X 在向人们展示“引人...
对话陈佳玉:从核聚变到机器人,... 本科毕业于北大工学院,早期研究聚焦于自动驾驶;博士后期间在卡内基梅隆大学,利用强化学习解决核聚变反应...
德创达科技取得耐弯折的柔性动力... 国家知识产权局信息显示,东莞市德创达科技有限公司取得一项名为“耐弯折的柔性动力线缆”的专利,授权公告...