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)   }) })

完整代码

   

相关内容

热门资讯

出厂搭载鸿蒙6,华为Pura ... 【ZOL中关村在线原创技术解析】12月22日,华为官宣Pura 80系列将在出厂时直接预装全新的鸿蒙...
港股新股爆发力十足:轻松健康暗... 来源:嗨牛商业评论 历经11年深耕,这家从大健康基因起步的企业,即将登陆港交所。 暗盘交易作为港股新...
靠谱的爆屏修复品牌企业推荐:伟... 在当今数字化时代,手机已成为人们生活中不可或缺的一部分。然而,手机屏幕易碎的问题却让许多用户头疼不已...
专访地平线副总裁吕鹏:做不好端... 来源:21世纪经济报道 今年前三个季度,国内20万元以上乘用车市场份额占比30%,13万元以下市场份...
原创 套... 作者|时事热点观察者 “升套餐一键搞定,降套餐难于上青天”——这句在社交平台上流传甚广的吐槽,道出了...