Vue 3.5 新特性解析

在Vue 3.5中，几个新特性值得关注，它们将极大简化和增强你的开发体验。让我们逐一深入了解这些特性。

1. `defineProps`支持解构

在Vue 3.5中，defineProps现在支持解构。你可以直接从defineProps中解构出需要的属性，而不必像以前一样使用props.xxx。例如：

const { age = 0, name = '张三' } = defineProps<{age?: number;name?: string;
}>();const test = () => {console.log('----->', name, age);
}

这样可以简化代码，并使其更加清晰。然而，对于不常使用setup语法糖的开发者来说，这一变化可能影响不大。

2. `useTemplateRef` - 定义模板的 DOM 元素的 ref

useTemplateRef是一个新引入的 API，它使得定义模板中的 DOM 元素的 ref 更加直观和简洁。使用示例如下：

<script setup>
import { useTemplateRef, onMounted } from 'vue'const inputRef = useTemplateRef('inputRef')onMounted(() => {inputRef.value.focus()
})
</script><template><input ref="inputRef" />
</template>

这个新 API 解决了以前使用 ref() 声明 DOM 元素时的混淆问题，使得代码更具可读性。

3. `useId` - 获取唯一的 Vue 实例 ID

useId 提供了一个生成唯一 ID 的简单方式，对于表单元素和动态组件的渲染非常有用：

<script setup>
import { useId } from 'vue'const id = useId()
</script><template><form><label :for="id">Name:</label><input :id="id" type="text" /></form>
</template>

这一特性有助于确保 ID 的唯一性，避免了手动管理 ID 的麻烦。

4. `watch` 中 `deep` 支持数字

watch 现在允许在 deep 属性中传入数字，指定监听响应性数据的层级。这对于细化数据监听非常有用：

const testData = reactive({a: {b: {c: {d: 1}}}
})watch(() => testData, () => {console.log('state changed')},{ deep: 2 }
);testData.a.b = { c: { d: 2 } } // 触发监听
testData.a.b.c = { d: 3 } // 不触发

这种方式能精确控制监听的深度，提高性能和控制力。

5. `onWatcherCleanup` - 清除副作用

onWatcherCleanup 允许在 watch 函数中注册清理副作用的操作：

import { watch, onWatcherCleanup } from 'vue'watch(id, (newId) => {const { response, cancel } = doAsyncWork(newId)onWatcherCleanup(cancel)
})watch(id, (newId, oldId, onCleanup) => {const { response, cancel } = doAsyncWork(newId)onCleanup(cancel);
})