今天,我们很高兴地宣布 Vue 3.5 “Tengen Toppa Gurren Lagann” 发布!

此次要版本不包含任何重大更改,并且包括内部改进和有用的新功能。我们将在这篇博文中介绍一些亮点 - 有关更改和新功能的完整列表,请查阅 GitHub 上的完整变更日志

响应式系统优化

在 3.5 中,Vue 的反应性系统经历了另一次重大重构,实现了更好的性能并显着提高了内存使用率 ( -56% ),而行为没有变化。重构还解决了 SSR 期间因计算挂起而导致的陈旧计算值和内存问题。

此外,3.5 还优化了大型、深度反应阵列的反应跟踪,在某些情况下使此类操作速度提高了 10 倍。

详细信息: PR#10397PR#9511

响应式的 Props 解构

Reactive Props Destruction 已在 3.5 中稳定下来。现在默认启用该功能,从 <script setup> 中的defineProps 调用解构的变量现在是反应性的。值得注意的是,此功能通过利用 JavaScript 的本机默认值语法,显着简化了使用默认值声明 props 的过程:

之前:

const props = withDefaults(
  defineProps<{
    count?: number
    msg?: string
  }>(),
  {
    count: 0,
    msg: 'hello'
  }
)

现在:

const { count = 0, msg = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()

对解构变量(例如 count )的访问会由编译器自动编译到 props.count 中,因此在访问时会跟踪它们。与props.count 类似,观察解构的 prop 变量或将其传递到可组合项同时保留反应性需要将其包装在 getter 中:

watch(count /* ... */)
//    ^ results in compile-time error

watch(() => count /* ... */)
//    ^ wrap in a getter, works as expected

// composables should normalize the input with `toValue()`
useDynamicCount(() => count)

对于那些喜欢更好地区分解构属性和普通变量的人来说, @vue/language-tools 2.1 版本提供了一个可选设置来为它们启用嵌入提示:
[翻译] Vue 3.5 发布-LMLPHP

详细信息

  • 有关用法和注意事项,请参阅文档
  • 有关此功能背后的历史和设计原理,请参阅RFC#502

SSR 改进

3.5 为服务器端渲染 (SSR) 带来了一些期待已久的改进。

Lazy Hydration

异步组件现在可以通过 defineAsyncComponent() API 的 hydrate 选项指定策略来控制何时应进行 Hydrated。例如,仅在组件可见时对其进行水合:

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

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

详细信息: PR#11458

useId()

useId() 是一个 API,可用于生成每个应用程序唯一的 ID,并保证在服务器和客户端渲染中保持稳定。它们可用于生成表单元素和可访问性属性的 ID,并可在 SSR 应用程序中使用,而不会导致水合作用不匹配:

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

详细信息: PR#11404

data-allow-mismatch

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

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

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

自定义元素改进

3.5 修复了许多与defineCustomElement() API 相关的长期存在的问题,并添加了许多使用 Vue 创作自定义元素的新功能:

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

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

import MyElement from './MyElement.ce.vue'

defineCustomElements(MyElement, {
  shadowRoot: false,
  nonce: 'xxx',
  configureApp(app) {
    app.config.errorHandler = ...
  }
})

其他功能

useTemplateRef()

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

<script setup>
import { useTemplateRef } from 'vue'

const inputRef = useTemplateRef('input')
</script>

<template>
  <input ref="input">
</template>

在 3.5 之前,我们建议使用纯引用,其变量名称与静态 ref 属性匹配。旧方法要求编译器可以分析 ref 属性,因此仅限于静态 ref 属性。相比之下, useTemplateRef() 通过运行时字符串 ID 匹配引用,因此支持动态引用绑定到更改的 ID。

@vue/language-tools 2.1 还实现了对新语法的特殊支持,因此在使用 useTemplateRef() 时,您将根据模板中是否存在 ref 属性获得自动完成和警告:
[翻译] Vue 3.5 发布-LMLPHP

延迟传送(Deferred Teleport)

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

在 3.5 中,我们为<Teleport>引入了defer属性,它会在当前渲染周期之后安装它,因此现在可以使用:

<Teleport defer target="#container">...</Teleport>
<div id="container"></div>

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

详细信息: PR#11387

onWatcherCleanup()

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

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // callback logic
  })

  onWatcherCleanup(() => {
    // abort stale request
    controller.abort()
  })
})

相关:有关副作用清理的新文档部分。

有关 3.5 中的更改和功能的完整列表,请查看GitHub 上的完整更改日志

09-13 01:30