新人求关注?，点击右上角 ↗? 关注，博主日更，全年无休，您的关注是我的最大的更新的动力～ 感谢大家了

就在 9 月 1 号，迭代了一年多的 Vue 3.5 终于发布了，这次发布的代号是 "天元突破 红莲螺岩"。

这是一个机器人动画片的名字，相信喜欢看动漫的小伙伴应该很熟悉

从更新的 CHANGELOG 上来看，这次发布没有破坏性的更新，更多的是一些底层功能的重构，从而进一步提升应用性能。主要的更新有以下几个方面：

Reactivity 优化

在 Vue 3.5 中，响应式系统做了重大改进，主要有以下几点：

• 性能更好：系统运行更快。
• 内存使用减少：内存占用减少了 **56%**。
• 行为保持不变：现有功能和使用方式没有改变。
• 解决了旧计算值和内存问题：修复了 SSR 中因悬挂计算导致的内存和旧值问题。
• 数组响应式性能提升： 在一些大型、深度响应的数组性能提升10倍

“悬挂计算”指的是在某些情况下，计算属性（computed properties）或副作用（例如，watchers）被设置为响应式系统中的某个状态或属性的变化，但由于某种原因，计算过程没有正确完成，导致计算结果没有更新，或者存在陈旧的计算值。这种情况下，这些“悬挂”的计算属性可能会占用内存或引发错误。

详情可查看PR：PR#10397, PR#9511

解构响应式属性

在 3.5 版本中，解构响应式属性功能已经稳定并默认启用，主要优点有：

• 更简单的代码：现在你可以直接在 defineProps 中解构并设置默认值，而无需像之前那样使用 withDefaults。
• 保持响应性：解构后的变量仍然是响应式的，编译时会自动处理为 props.count 这样的访问方式。
• 更好的类型提示支持：@vue/language-tools 2.1 提供了一个可选设置，可以为解构的属性启用内联提示，帮助区分解构属性和普通变量。

代码示例对比：

• 之前的代码：

• 现在的代码：

这样写起来更简单明了，还能确保代码的响应式行为。

注意：在监视或传递这些解构变量时，仍需使用 getter 包装，以确保响应性。

SSR 优化升级

3.5 版本为服务端渲染（SSR）带来了多项重要改进，主要改进的功能是：

懒加载 Hydration

• 自定义 Hydration 时间：异步组件现在可以通过 defineAsyncComponent() 的 hydrate 选项控制何时进行 Hydration。例如，可以设置只有在组件可见时才进行 Hydration。
• 更高的灵活性：这个 API 保持了较低的复杂度，为框架如 Nuxt 提供了构建更高级功能的基础。

新增 useId() 生成唯一 ID

useId() 用于生成应用内唯一且在服务端和客户端渲染中保持一致的 ID，适用于表单元素和可访问性属性，避免 SSR 过程中产生 ID 不匹配的问题。

新增data-allow-mismatch 属性

• 抑制 Hydration 警告：在一些无法避免客户端和服务器端数据不一致的情况下（如日期），可以使用 data-allow-mismatch 属性来防止因这些差异导致的 Hydration 警告。
• 自定义 mismatch 类型：可以指定属性值，限制允许的不一致类型，包括 text、children、class、style 和 attribute。

自定义元素改进

在这个版本中，Vue 对 defineCustomElement() API 进行了多项修复，并添加了一些新功能，让使用 Vue 编写自定义元素更加灵活。主要体现在：

• 自定义应用配置：通过 configureApp 选项，可以为自定义元素配置应用设置。
• 访问宿主元素和 Shadow DOM：新增了 useHost()、useShadowRoot() 和 this.$host API，方便访问自定义元素的宿主元素和 Shadow DOM 根节点。
• 支持无 Shadow DOM 挂载：可以通过传递 shadowRoot: false 来挂载没有 Shadow DOM 的自定义元素。
• 支持 nonce 选项：可以提供 nonce 选项，将其附加到自定义元素注入的 <style> 标签上，增强安全性。

这些新特性可以通过 defineCustomElement 的第二个参数传递，例如：

这些新特性让 Vue 自定义元素的使用更加灵活，从而适应更多场景

useTemplateRef

在 3.5 版本中，Vue 引入了一个新的方式来获取模板引用（Template Refs），即 useTemplateRef() API，主要改进点：

• 动态 Ref 绑定：useTemplateRef() 支持通过运行时字符串 ID 来匹配 ref，因此可以绑定到动态变化的 ID。这比之前只能使用静态 ref 属性的方式更灵活。
• 增强的开发工具支持：@vue/language-tools 2.1 版本对 useTemplateRef() 提供了特殊支持，使用该 API 时可以获得自动补全和警告提示，提升了开发体验。

示例代码：

这个改进让模板引用在处理动态元素时更加灵活，也使得开发过程更加顺畅。 这个对用户心智负担降低很多，非常 nice。

延迟传送

在 Vue 3.5 版本中，<Teleport> 组件得到了改进。以前 <Teleport> 只能将内容传送到在它挂载时已经存在的目标元素。现在，引入了 defer 属性，使得 <Teleport> 可以将内容传送到稍后渲染的目标元素中。

Teleport特性：

• 以前：目标元素必须在 <Teleport> 组件挂载时就已经存在。
• 现在：defer 属性让 <Teleport> 可以在当前渲染周期后挂载，从而支持传送内容到稍后渲染的元素。

示例：

这种改进使得使用 <Teleport> 更加灵活，同时保留了向后兼容性。

详情可见PR：PR#11387

onWatcherCleanup()

在 Vue 3.5 版本中，引入了一个新的全局 API —— onWatcherCleanup()。这个 API 允许你在 watchers 中注册清理回调，帮助你处理异步操作或其他需要在 watcher 停用时清理的场景。

关键点：

• 新功能：onWatcherCleanup() 用于在 watcher 中注册清理逻辑。
• 用途：当 watcher 停用时，自动执行清理操作，例如中止未完成的异步请求。

示例代码：

这个新 API 帮助你更方便地管理 watcher 中的资源清理，避免资源泄露或不必要的操作。

小结

更多的详细的更新记录，可以上 vue 仓库查看， 欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注?、转发～

求关注～全年无休日更~ 求关注～