Vue3.5

Vue3.5

本文主要介绍 Vue3.5 的新特性。

Github-CHANGELOG：https://github.com/vuejs/core/blob/main/CHANGELOG.md#350-2024-09-03

Vue3-Blog：https://blog.vuejs.org/posts/vue-3-5

defineProps 支持解构

在 Vue3.5 中，defineProps支持解构

访问解构变量，例如count自动编译成props.count

<script setup>
const { count = 0 } = defineProps({
    count: {
        type: Number,
    },
})
</script>

useId

全局唯一自增ID

生成在每个应用实例内的唯一 ID

如果同一页面上有多个Vue应用实例，可以通过app.config.idPrefix为每个应用提供一个 ID 前缀，以避免 ID 冲突

<script setup>
import { useId } from 'vue'

const id = useId() // v-0
const id2 = useId() // v-1
</script>

useTemplateRef

返回一个浅层 ref，其值将与模板中的具有匹配ref attribute的元素或组件同步

<template>
    <div>
        <a-space>
            <a-input
                v-model:value="inputValue"
                ref="input"
            />
            <a-button type="primary" @click="inputFocus">inputFocus</a-button>
        </a-space>
    </div>
</template>

<script setup>
import { useTemplateRef } from 'vue'

const inputValue = ref('')

const inputRef = useTemplateRef('input' /* 该值不可同其他变量名重复 */)

const inputFocus = () => {
    console.log('inputRef', inputRef)
    inputRef.value.focus()
}
</script>

onWatcherCleanup

注册一个监听器清理函数，在当前侦听器即将重新运行时执行

只能在watchEffect作用函数或watch回调函数的同步执行期间调用 (即不能在异步函数的 await 语句之后调用)

<script setup>
import { onWatcherCleanup } from 'vue'

const count = ref(1)

watch(count, (newVal, oldVal, onCleanup) => {
    console.log(newVal)
    const handler = () => console.log('newVal', newVal)
    addEventListener('click', handler)
    onWatcherCleanup(() => {
        // onCleanup(() => {
        // 在当前侦听器即将重新运行时执行
        // 清除副作用，让事件不会重复绑定
        removeEventListener('click', handler)
    })
})
</script>

指定 watch 监听深度

在 Vue3.5 中，deep选项还可以是一个数字，表示最大遍历深度——即 Vue 应该遍历对象嵌套属性的级数

<script setup>
const obj = reactive({
    a: { // 1层触发
        b: { // 2层以下不触发
            c: 1,
        },
    },
    d: 2,
})

watch(
    obj,
    (newVal) => {
        console.log('obj-change', newVal)
    },
    {
        // deep传递number
        // 指定watch监听深度
        deep: 1,
    }
)
</script>