Vue 3.5 正式版发布

2024年09月03日，Vue 官方今天发布 Vue 3.5 正式版，Vue 3.5 “天元突破红莲螺岩”版本。这个小版本不包含任何破坏性变更，同时包括了内部改进和实用的新功能。

响应式系统优化

在 3.5 中，Vue 的响应式系统经历了又一次重大重构，实现了更好的性能和显著减少了内存占用(-56%)，且没有行为变化。这次重构还解决了 SSR 过程中由于悬挂的计算属性导致的过时计算值和内存问题。

此外，3.5 还优化了对大型、深度响应式数组的响应式追踪，在某些情况下使此类操作的速度提高了多达 10 倍。

响应式 Props 解构

响应式 Props 解构在 3.5 中已经稳定。该功能现在默认启用，在 <script setup> 中从 defineProps 调用解构的变量现在是响应式的。值得注意的是，这个功能通过利用 JavaScript 的原生默认值语法，大大简化了声明带有默认值的 props。

SSR 改进

3.5 为服务器端渲染(SSR)带来了一些期待已久的改进。

Lazy Hydration 懒加载水合

异步组件现在可以通过 defineAsyncComponent() API 的 hydrate 选项来控制何时进行水合。例如，只在组件变为可见时才进行水合：

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({

loader: () => import('./Comp.vue'),

hydrate: hydrateOnVisible()

})

核心 API 故意设计得比较底层，Nuxt 团队已经在这个功能之上构建了更高级的语法糖。

useId()

useId() 是一个可以用来生成应用内唯一 ID 的 API，这些 ID 保证在服务器和客户端渲染之间保持稳定。它们可以用于生成表单元素和无障碍属性的 ID，并且可以在 SSR 应用中使用而不会导致水合不匹配：

<script setup>

import { useId } from 'vue'

const id = useId()

</script>

<template>

<form>

<label :for="id">Name:</label>

<input :id="id" type="text" />

</form>

</template>

data-allow-mismatch

在客户端值不可避免地与其服务器端对应值不同的情况下(例如日期)，现在可以使用 data-allow-mismatch 属性来抑制由此产生的水合不匹配警告：

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

还可以通过为该属性提供一个值来限制允许哪些类型的不匹配，可能的值包括 text、children、class、style 和 attribute。

更多更新请查看：https://github.com/vuejs/core/blob/main/CHANGELOG.md