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

完整代码

   

相关内容

热门资讯

雷军宣布再办直播 相约吴佩与陈... 【CNMO科技消息】1月15日,小米集团创始人、董事长兼首席执行官雷军宣布,将于今晚8点再次开启直播...
全球“科技春晚”又增“含苏量” 受访单位供图 当地时间1月6日至9日,以“定义AI的物理边界”为主题的2026国际消费电子展(CES...
花旗CEO警告今年还有裁员行动... 来源:滚动播报 据报道,花旗首席执行官范洁恩(Jane Fraser)正在终结花旗集团落后的企业文化...
静态ISP代理是什么意思?它与... 在网络世界里,很多朋友在做业务时都会用到代理IP,但面对各种各样的代理类型,经常会感到困惑。今天,我...
美国对部分进口半导体、制造设备... 美国白宫14日发布声明,以应对国家安全威胁为由,从15日起对部分进口半导体、半导体制造设备和衍生品加...