Vue3.5与Vue3新功能对比

一、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>