尤大边肝黑猴子边升级 Vue 3.5，版本代号“天元突破”Vue 3.5 正式发布，版本代号“天元突破”，引入了响应性系

天元突破.png

作者：尤雨溪

译者：林语冰

资源：Vue 官方博客

免责声明：活人翻译，略有删改，仅供粉丝参考！

00. 前言

大家好，我是大家的林语冰。

前阵子看到尤大在和朋友闲聊如何通关黑猴子，我还以为最近可以 relax 一下了，没想到尤大一边升级打怪，一边又给 Vue 升级了一个次版本......

所以，本期我们分享的是 Vue 3.5 最新版本的官方博客。今天，我们很激动地发布了 Vue 3.5（“天元突破”）！

这个次版本不涉及任何破坏性更新，且涵盖了内部优化和好用的新特性。我们会在本文中介绍一些新版亮点。

Vue 3.5 的响应性系统再次经历了重大重构，实现了更棒的性能，且显著提高了内存使用率（-56% ），而行为没有变更。

重构还解决了 SSR 期间因计算挂起而导致的旧计算值和内存问题。

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

Vue 3.5 中 响应式 props 解构 现已稳定。

现在 Vue 默认会启用此功能，从 <script setup> 中的 defineProps 调用解构的变量现在是响应式的。

注意，此功能利用了 JS 原生的默认值语法，显著简化了使用默认值声明 props 的过程：

Vue 3.5 之前的写法如下：

而 Vue 3.5 之后可以这样写：

对 count 等解构变量的访问会由编译器自动编译到 props.count 中，因此在访问时会追踪它们。

与 props.count 类似，观察解构的 prop 变量或将其传递给组合式函数同时保留响应性，要求将其包装在 getter 中：

对于那些想要更好区分解构 props 和普通变量的用户而言，@vue/language-tools 2.1 提供了一个选用设置来为它们启用嵌入提示：

嵌入提示

Vue 3.5 为 SSR（服务端渲染）带来了一些期待已久的优化。

异步组件现在可以通过 defineAsyncComponent() API 的 hydrate 选项指定策略，从而控制何时 hydrate（水合）。

举个栗子，当且仅当组件可见时水合该组件：

核心 API 有意设置为较底层，Nuxt 团队已经在此功能的基础上构建了更高级的语法糖。

useId() 是一个 API，可用于生成每个应用的唯一 ID，并保证在服务端和客户端渲染中保持稳定。

它们可用于生成表单元素和可访问性属性的 ID，并可在 SSR 应用中使用，而不会导致水合不匹配：

如果客户端值不可避免地与其服务器对应值（比如日期等）不同，我们现在可以使用 data-allow-mismatch 属性来抑制生成的水合不匹配警告：

你还可以通过向属性提供值来限制允许的不匹配类型，其中可能的值为 text、children、class、style 和 attribute。

Vue 3.5 修复了许多与 defineCustomElement() API 相关的顽瘴痼疾，并添加了许多使用 Vue 创作自定义元素的新功能：

通过 configureApp 选项支持自定义元素的应用配置。
添加 useHost()、useShadowRoot() 和 this.$host API 用于访问自定义元素的宿主元素和 shadow root。
通过传递 shadowRoot: false 支持在没有 Shadow DOM 的情况下挂载自定义元素。
支持提供 nonce 选项，该选项将附加到自定义元素注入的 <style> 标签。