跳到主要内容

Vue 3.5+ 新特性与优化归纳

Vue 3.5（代号 "Tengen Toppa Gurren Lagann"）于 2024 年 9 月发布，虽然是一个次要版本，但带来了一系列重量级的性能优化和功能增强。

1. 响应式系统深度优化​

这是 Vue 3.5 最具技术含量的更新，彻底重构了内部的响应式追踪机制。

  • 性能飞跃：
    • 内存占用减少 56%：通过优化依赖追踪的数据结构，大幅降低了基础开销。
    • 超快操作：在处理大型、深层响应式数组时，速度提升了近 10 倍。
  • 解决痛点：
    • 彻底解决了 SSR 期间可能产生的内存泄漏问题。
    • 优化了 computed 的过期逻辑，使复杂计算更加高效。

2. 核心 API 增强​

Reactive Props Destructure (响应式 Props 解构)​

此前解构 defineProps 会丢失响应式，现在该功能已正式稳定。

<script setup>
// 解构并保留响应式，且支持原生 JavaScript 默认值语法
const { count = 0, msg } = defineProps(["count", "msg"]);

// count 是响应式的！
watchEffect(() => console.log(count));
</script>

useTemplateRef()​

取代了以往通过 ref(null) 并匹配名称的隐式方式，提供了更明确的模板引用获取方式。

import { useTemplateRef, onMounted } from "vue";

const inputEl = useTemplateRef("my-input");

onMounted(() => {
  inputEl.value.focus();
});

useId()​

一个全新的全局 API，用于生成在同一个应用中唯一的 ID。

  • 用途：主要用于无障碍属性（如 label 的 for 和 input 的 id）。
  • SSR 支持：确保护持端和客户端生成的 ID 一致，避免 Hydration 匹配失败。

3. SSR 与 Hydration 优化​

Vue 3.5 引入了 Lazy Hydration (懒加载补水) 机制：

  • 可以通过 defineAsyncComponent 控制组件在进入视口（Viewport）时才进行补水。
  • 提供了 data-allow-mismatch 属性，允许开发者显式忽略不可避免的客户端/服务器像素差异。

4. 其它重要改进​

  • onWatcherCleanup()：在 watch 或 watchEffect 中注册清理逻辑的新 API，使代码更整洁。
  • Deferred Teleport：<Teleport> 新增 defer 属性，允许在当前渲染周期结束后再挂载目标元素，解决了目标容器尚未创建的问题。
  • TS 支持增强：提升了复杂 Props 的类型推断速度。

参考资料：