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)
}

编译器会自动将对解构后的变量（如 count）的访问编译成 props.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: String
})

你可以像在 JavaScript 对象解构中一样直接赋值默认值，这非常方便！

使用 useTemplateRef() 获取模板引用

在 Vue 3 中，你可以使用 ref 来获取模板引用，以访问 DOM 和子组件，但 ref 可能令人困惑。例如，一个 ref 变量是响应式数据还是 DOM 元素？Vue 3.5 引入了 useTemplateRef，完美地解决了这些问题。

<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 组件改进

组件有一个已知的限制，即其目标元素必须在组件挂载时存在。在 Vue 3.5 中， 引入了一个 defer 属性，允许在当前渲染周期结束后挂载：

<Teleport defer to="#cont">
  <div v-if="open">
    <span>挂载到 id 为 'cont' 的 div 上span>
    <button @click="open = false">关闭button>
  div>
Teleport>
<div id="cont">div>
<button @click="open = true">打开button>

由于 在 Teleport 之后渲染，因此需要 defer 属性。如果 在 Teleport 之前渲染，则不需要 defer。

使用 useId() 生成唯一的应用 ID

useId() 用于为每个应用程序生成唯一的 ID，确保在服务器端和客户端渲染之间保持稳定性。它可以用于生成表单元素和可访问性属性的 ID，而不会在 SSR 应用程序中造成 ID 冲突：

<template>
  <form>
    <label :for="id">姓名：label>
    <input :id="id" type="text" />
  form>
template>

参考资料