vue3.5最新发布，这几个新用法还不快来学习一下！前言

就在昨天（2024-09-03），vue官方发布了vue.js3.5的稳定版本，在vue的官方英文文档上也已经能看到3.5版本更新的内容，该版本不包含重大更改，包括内部改进和实用的新功能。下文来了解几个比较有意思的改动。

响应式 Props 解构

vue3.5前响应式解构props用法

使用toRef()这个api对props的参数进行响应式解构，如下所示：

vue3.5响应式解构props方法

vue3.5对解构变量（例如count）的访问会被编译器自动编译成props.count，因此访问时会对其进行跟踪。

props默认值写法

vue3.5前props默认值写法

// 使用ts泛型时默认值写法(编译时)
const props = withDefaults(
  defineProps<{
    count: number
  }>(),
  {
    count: 0
  }
)
// 使用js时默认值写法(运行时)
const props = defineProps({
  count: {
    type: Number,
    default: 2
  }
})

vue3.5props默认值写法

// ts写法
const { count = 1 } = defineProps<{
  count: number
}>()
// js写法
const { count = 2 } = defineProps({
  count: String
})

可以直接像在JavaScript语言中对象解构的语法一样赋予默认值，有效降低了用户的心智负担！这点看起来挺不错的！

useTemplateRef()获取模板引用实例

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渲染的div绑定ref="itemEl"的列表。

组件优化

内置组件的一个已知限制是，其目标元素必须在组件挂载时已存在。 在vue3.5中，组件引入了一个在当前渲染周期之后挂载它的defer prop， 如下用法：

  <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组件。如果把放到Teleport前面渲染，则不需要加defer。

useId()生成应用唯一标识

useId()可用于生成每个应用程序唯一的 ID，这些 ID 可确保在服务器和客户端渲染过程中保持稳定。可用于生成表单元素和可访问性属性的 ID，并可在 SSR 应用程序中使用，而不会导致ID冲突：

<template>
  <form>
    <label :for="id">Name:label>
    <input :id="id" type="text" />
  form>
template>

这个貌似可以单纯的当成一个生成唯一id的api来使用。

结语

除了以上提到的外，vue3.5还重构了响应式系统，性能方面得到了提升，据说在处理某些情况下可使性能提高到10倍。

参考引用

想了解更多vue3.5的更新内容，可点击访问该链接 Announcing Vue 3.5，获取更多资讯。

有关更改和新功能的完整列表，请参阅GitHub 上的完整更新日志。