阅读量:0
一、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) }) })完整代码
<template> <div> <button ref="button"></button> </div> </template> <script setup lang="ts"> import { ref, watch, useId, useTemplateRef } from 'vue' // 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 }>() //全局唯一id-----一个app内 const id = useId() //vue3 const button = ref(null) //通过ref获取dom----vue3.5 const el = useTemplateRef('button') console.log(el, 'dom') // vue3.5 //onCleanup---下一次watch执行前触发---可以在这里移除上一次watch watch(count, (newVal, oldVal, onCleanup) => { const handler = () => { console.log(newVal, 'newVal') } addEventListener('click', handler) onCleanup(() => { removeEventListener('click', handler) }) }) </script> <style scoped lang="scss"></style> 