Vue3.5 新特性有哪些？
前言
2024年9月3日，vue 官方团队发布了 Vue.js 3.5 稳定版，这个小版本不包含任何破坏性变更，为服务器端渲染(SSR)带来了一些期待已久的改进，同时包括了内部改进和实用的新功能。让我们一起来探索这些有趣的变化。
响应式系统优化
在 3.5 中，Vue 的响应式系统经历了又一次重大重构，实现了更好的性能和显著减少了内存占用(-56%)，且没有行为变化。这次重构还解决了 SSR 过程中由于悬挂的计算属性导致的过时计算值和内存问题。
此外，3.5 还优化了对大型、深度响应式数组的响应式追踪，在某些情况下使此类操作的速度提高了多达 10 倍。
响应式 Props 解构
响应式 Props 解构在 3.5 中已经稳定。该功能现在默认启用，在 <script setup> 中从 defineProps 调用解构的变量现在是响应式的。值得注意的是，这个功能通过利用 JavaScript 的原生默认值语法，大大简化了声明带有默认值的 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)
}Lazy Hydration 懒加载水合
异步组件现在可以通过 defineAsyncComponent() api 的 hydrate 选项来控制何时进行水合。例如，只在组件变为可见时才进行水合：
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const AsyncComp = defineAsyncComponent({
loader: () => import('./Comp.vue'),
hydrate: hydrateOnVisible()
})核心 API 故意设计得比较底层，Nuxt 团队已经在这个功能之上构建了更高级的语法糖。
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() 平时工作中不常用。但是需要注意的是：useId() 只会对一个 createApp 的实例生成一个唯一的 id，而如果存在多个 createApp ，那么每一个 createaApp 的实例中的 id 其实都是相同的，所以这时候我们可以选择自定义一个唯一的前缀+ id，进行二次 id 的单一化。
vue3.5文档：https://blog.vuejs.org/posts/vue-3-5
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！