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

完整代码

   

相关内容

热门资讯

阿里下场抢AI超级流量入口了 作者 | 黄昱 编辑 | 王小娟 在过去三年的全球AI军备赛中,阿里巴巴的主要精力放在面向B端的AI...
抓住时机打造绿色科技新优势 落实促进绿色低碳发展的科技政策,是《中共中央关于制定国民经济和社会发展第十五个五年规划的建议》提出的...
连云港高新区:多维发力护航企业... 近日,位于连云港高新区的江苏源泰精密仪器有限公司发布了国内首台自主研发的高精度圆壁测量仪,成为全球第...
阿里千问APP公测 与Chat... 本报讯 (记者梁傲男)11月17日,阿里巴巴正式宣布“千问”项目,全力进军AI to C市场。当天,...
广州南沙厚植新兴产业发展沃土 本报记者 胡 健 王云娜 可入海下3000米,作业精度达厘米级……位于广东广州市南沙区的深海智人(广...