前言
2024 年 9 月 3 日,Vue 官方团队发布了 Vue.js 3.5 稳定版,该版本没有引入任何破坏性变更,但包含了一些内部改进和有用的新特性。让我们一起来探索这些有趣的变化。
一、响应式 Props 解构
在 Vue 3.5 之前,你需要使用 toRef() 来响应式地解构 Props:
// 使用 toRef() 解构 props
const props = defineProps<{
count: number
}>()
// 响应式解构 count 属性
const count = toRef(props, 'count')
const log = () => {
console.log(count.value)
}
在 Vue 3.5 中,你可以直接进行响应式解构:
// Vue 3.5 支持直接响应式解构
const { count } = defineProps<{
count: number
}>()
const log = () => {
console.log(count)
}
二、Props默认值
在 Vue 3.5 之前,Props 默认值的写法如下:
// 使用 TypeScript 泛型(编译时)
const props = withDefaults(
defineProps<{
count: number
}>(),
{
count: 0
}
)
// 使用 JavaScript(运行时)
const props = defineProps({
count: {
type: Number,
default: 2
}
})
在 Vue 3.5 中,默认 Props 值可以使用以下方式:
// TypeScript
const { count = 1 } = defineProps<{
count: number
}>()
// JavaScript
const { count = 2 } = defineProps({
count: Number
})
三、使用 useTemplateRef() 获取模板引用
在 Vue 3 中,你可以使用 ref
来获取模板引用,以访问 DOM 和子组件,但 ref 可能令人困惑。例如,一个 ref 变量是响应式数据还是 DOM 元素?Vue 3.5 引入了 useTemplateRef
,完美地解决了这些问题。
<template>
<div class="list" ref="listEl">
<div ref="itemEl" class="item" v-for="item in list" :key="item">
{{ item }}
</div>
</div>
</template>
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'
const list = [1, 2, 3]
const listRef = useTemplateRef('listEl')
const itemRef = useTemplateRef('itemEl')
onMounted(() => {
console.log(listRef.value) // div.list
console.log(itemRef.value) // Proxy(Array) {0: div.item, 1: div.item, 2: div.item}
})
</script>
当一个模板绑定的 ref
拥有多个相同名称的元素时,useTemplateRef()
会返回一个数组,例如使用 v-for
渲染的列表。
四、Teleport 组件改进
<Teleport>
组件有一个已知的限制,即其目标元素必须在组件挂载时存在。在 Vue 3.5 中,<Teleport>
引入了一个 defer
属性,允许在当前渲染周期结束后挂载:
<Teleport defer to="#cont">
<div v-if="open">
<span>挂载到 id 为 'cont' 的 div 上</span>
<button @click="open = false">关闭</button>
</div>
</Teleport>
<!-- Teleport 内容的容器 -->
<div id="cont"></div>
<button @click="open = true">打开</button>
由于 <div id="cont"></div>
在 Teleport 之后渲染,因此需要 defer
属性。如果 <div id="cont"></div>
在 Teleport 之前渲染,则不需要 defer
。
使用 useId() 生成唯一的应用 ID
useId()
用于为每个应用程序生成唯一的 ID,确保在服务器端和客户端渲染之间保持稳定性。它可以用于生成表单元素和可访问性属性的 ID,而不会在 SSR 应用程序中造成 ID 冲突:
<script setup lang="ts">
import { useId } from 'vue'
const id = useId()
</script>
<template>
<form>
<label :for="id">姓名:</label>
<input :id="id" type="text" />
</form>
</template>
useId()
平时工作中不常用
总结
想要了解更多 Vue 3.5 的更新,请查看 官方 Vue 3.5 链接获取更多信息。