在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);
})
在组件卸载之前或者下一次 watch 回调执行之前会自动调用 onWatcherCleanup 函数,同样有了这个函数后你就不需要在组件的 beforeUnmount 钩子函数去统一清理一些 timer 了
这使得处理异步操作和清理副作用变得更加简便。
6. defineModel
- 简化 v-model
实现
虽然 defineModel
是 Vue 3.4 中的功能,但它简化了 v-model
的实现,值得记住。更多信息可以参考 Vue 官方文档:defineModel。