作者:
尤雨溪
译者:
林语冰
资源:Vue 官方博客
免责声明:活人翻译,略有删改,仅供粉丝参考!
00. 前言
大家好,我是大家的林语冰。
前阵子看到尤大在和朋友闲聊如何通关黑猴子,我还以为最近可以 relax 一下了,没想到尤大一边升级打怪,一边又给 Vue 升级了一个次版本......
所以,本期我们分享的是 Vue 3.5 最新版本的官方博客。今天,我们很激动地发布了 Vue 3.5(“天元突破”)!
这个次版本不涉及任何破坏性更新,且涵盖了内部优化和好用的新特性。我们会在本文中介绍一些新版亮点。
- 响应性系统优化
- 响应式
props
解构 - SSR(服务端渲染)优化
- Lazy Hydration(惰性水合)
useID()
APIdata-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 之前 的写法如下:
而 Vue 3.5 之后 可以这样写:
对 count
等解构变量的访问会由编译器自动编译到 props.count
中,因此在访问时会追踪它们。
与 props.count
类似,观察解构的 prop
变量或将其传递给组合式函数同时保留响应性,要求将其包装在 getter
中:
对于那些想要更好区分解构 props
和普通变量的用户而言,@vue/language-tools
2.1 提供了一个选用设置来为它们启用嵌入提示:
03. SSR 优化
Vue 3.5 为 SSR(服务端渲染)带来了一些期待已久的优化。
3.1 惰性水合
异步组件现在可以通过 defineAsyncComponent()
API 的 hydrate
选项指定策略,从而控制何时 hydrate(水合)。
举个栗子,当且仅当组件可见时水合该组件:
核心 API 有意设置为较底层,Nuxt 团队已经在此功能的基础上构建了更高级的语法糖。
3.2 useId()
useId()
是一个 API,可用于生成每个应用的唯一 ID,并保证在服务端和客户端渲染中保持稳定。
它们可用于生成表单元素和可访问性属性的 ID,并可在 SSR 应用中使用,而不会导致水合不匹配:
3.3 data-allow-mismatch 属性
如果客户端值不可避免地与其服务器对应值(比如日期等)不同,我们现在可以使用 data-allow-mismatch
属性来抑制生成的水合不匹配警告:
你还可以通过向属性提供值来限制允许的不匹配类型,其中可能的值为 text
、children
、class
、style
和 attribute
。
04. 自定义元素优化
Vue 3.5 修复了许多与 defineCustomElement()
API 相关的顽瘴痼疾,并添加了许多使用 Vue 创作自定义元素的新功能:
- 通过
configureApp
选项支持自定义元素的应用配置。 - 添加
useHost()
、useShadowRoot()
和this.$host
API 用于访问自定义元素的宿主元素和 shadow root。 - 通过传递
shadowRoot: false
支持在没有 Shadow DOM 的情况下挂载自定义元素。 - 支持提供
nonce
选项,该选项将附加到自定义元素注入的<style>
标签。
这些新的仅自定义元素选项可以通过第二个参数传递给 defineCustomElement
:
05. 其他重要特性
5.1 useTemplateRef() API
Vue 3.5 引入了一种通过 useTemplateRef()
API 获取模板 ref
的新方法:
在 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,它会在当前渲染周期之后挂载它,因此现在可以这样使用:
此行为需要 defer
属性,因为默认行为需要向后兼容。
5.3 onWatcherCleanup() API
Vue 3.5 引入了全局导入的 onWatcherCleanup()
API,用于在 watcher
中注册清理回调:
参考文献
- Vue 3.5:blog.vuejs.org/posts/vue-3…
- Vue:vuejs.org
- Nuxt:nuxt.com
粉丝互动 😍
👉 本期的话题是:你最喜欢 Vue 3.5 的哪个新特性,或者期望下次升级可以有哪些新功能?
欢迎你在本文下方留言互动,或者友情转发。👻
我是大家的林语冰 👨💻,欢迎持续关注我,随时了解前端社区的最新资讯。
谢谢大家的点赞和转发,我们下期再见,掰掰~ 👍