尤大边肝黑猴子边升级 Vue 3.5,版本代号“天元突破”

9,427 阅读5分钟

天元突破.png

作者:尤雨溪

译者:林语冰

资源:Vue 官方博客

免责声明:活人翻译,略有删改,仅供粉丝参考!

00. 前言

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

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

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

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

  • 响应性系统优化
  • 响应式 props 解构
  • SSR(服务端渲染)优化
    • Lazy Hydration(惰性水合)
    • useID() API
    • data-allow-mismatch 属性
  • 自定义元素优化
  • 其他重要特性
    • useTemplateRef() API
    • 延迟 Teleport
    • onWatcherCleanup() API

01. 响应性系统优化

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

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

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

02. 响应式 props 解构

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

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

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

Vue 3.5 之前 的写法如下:

01-before.png

而 Vue 3.5 之后 可以这样写:

02-after.png

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

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

03-getter.png

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

嵌入提示

03. SSR 优化

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

3.1 惰性水合

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

举个栗子,当且仅当组件可见时水合该组件:

05-hydrate.png

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

3.2 useId()

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

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

06-id.png

3.3 data-allow-mismatch 属性

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

07-allow.png

你还可以通过向属性提供值来限制允许的不匹配类型,其中可能的值为 textchildrenclassstyleattribute

04. 自定义元素优化

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

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

这些新的仅自定义元素选项可以通过第二个参数传递给 defineCustomElement

08-nonce.png

05. 其他重要特性

5.1 useTemplateRef() API

Vue 3.5 引入了一种通过 useTemplateRef() API 获取模板 ref 的新方法:

09-ref.png

在 Vue 3.5 之前,我们推荐使用变量名与静态 ref 属性匹配的普通 ref

旧方案要求编译器可以分析 ref 属性,因此仅限于静态 ref 属性。

相比之下,useTemplateRef() 通过运行时字符串 ID 匹配 ref,因此支持动态 ref 绑定到更改的 ID。

@vue/language-tools 2.1 还实现了对新语法的特殊支持,因此在使用 useTemplateRef() 时,你将根据模板中是否存在 ref 属性获得自动补全和警告:

自动补全

5.2 延迟 Teleport

内置 <Teleport> 组件的一个已知约束是在 teleport 组件挂载时其目标元素必须存在。这可以防止用户在 teleport 后将内容传送到 Vue 渲染的其他元素。

在 Vue 3.5 中,我们为 <Teleport> 引入了 defer prop,它会在当前渲染周期之后挂载它,因此现在可以这样使用:

11-defer.png

此行为需要 defer 属性,因为默认行为需要向后兼容。

5.3 onWatcherCleanup() API

Vue 3.5 引入了全局导入的 onWatcherCleanup() API,用于在 watcher 中注册清理回调:

12-clean.png

参考文献

  1. Vue 3.5blog.vuejs.org/posts/vue-3…
  2. Vuevuejs.org
  3. Nuxtnuxt.com

粉丝互动 😍

👉 本期的话题是:你最喜欢 Vue 3.5 的哪个新特性,或者期望下次升级可以有哪些新功能

欢迎你在本文下方留言互动,或者友情转发。👻

我是大家的林语冰 👨‍💻,欢迎持续关注我,随时了解前端社区的最新资讯。

谢谢大家的点赞和转发,我们下期再见,掰掰~ 👍