当前位置：首页 > article >正文

Vue3.5新版本特性一览-数组操作10倍性能提升+响应式属性解构+自定义组件优化+ssr水合改善+teleport支持defer!

article 2024/12/5 3:28:51

Vue 团队欣喜地宣布，Vue 3.5（代号 Tengen Toppa Gurren Lagann）于9月初发布！本次小版本更新并未引入任何破坏性更改，带来了诸多内部优化以及新功能。在这篇文章中，我们将重点介绍一些新特性和改进。如需了解全部更新内容，请参阅 GitHub 上的完整更新日志。

最近突然想整理一些前端框架版本更新的历史，想到就开始吧
这是9月后开启的版本，其实vue的更新都比较保守，实际上很多内容都是大版本更新的

我比较印象深刻的改动：

数组优化
teleport defer支持（这个是真的很好，之前出现过很多次，需要手动setTimeout，因为要挂载到别的组件的某个元素，但那个组件的渲染是慢一丢丢的就会出问题）

1. 响应式系统优化

Vue 3.5 对响应式系统进行了重大重构，性能提升显著，同时内存使用减少了 56%，且行为保持不变。这次重构还解决了 SSR 环境中挂起计算属性导致的内存问题，以及过时的计算值。

此外，对于大型深层响应式数组的追踪操作，性能提升达 10 倍。

详细信息：PR#10397, PR#9511

2. Reactive Props Destructure（响应式属性解构）

响应式属性解构在 3.5 中正式稳定，默认启用。通过 <script setup> 中的 defineProps，解构的变量现在具有响应式特性。这一功能还支持使用 JavaScript 原生的默认值语法，简化了具有默认值的 prop 声明。

示例：

之前：

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

现在：

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

解构后的变量（如 count）会被编译器自动追踪，因此无需显式绑定到 props。

详细信息：RFC#502

3. SSR 改进

Lazy Hydration（延迟激活）

通过 defineAsyncComponent 的 hydrate 选项，异步组件现在可以指定激活策略。例如，仅在组件可见时激活：

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

详细信息：PR#11458

useId()

新 API useId() 用于生成唯一且跨服务端和客户端稳定的 ID，非常适用于表单元素或无障碍属性：

<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>

4. 自定义元素的增强

Vue 3.5 修复了 defineCustomElement() 的众多历史问题，同时新增以下能力：

通过 configureApp 为自定义元素配置应用。
新增 useHost()、useShadowRoot() 和 this.$host API，支持访问宿主元素和 Shadow DOM。
支持通过 shadowRoot: false 禁用 Shadow DOM。
支持 nonce 选项，为自定义元素注入的 <style> 标签提供安全设置。

示例：

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

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

5. 其他值得关注的新特性

useTemplateRef()

通过 useTemplateRef() 动态获取模板引用：

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

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

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

这提升了动态引用的灵活性，并增强了开发体验。

Deferred Teleport（延迟传送）

<Teleport> 组件新增 defer 属性，可延迟目标元素的创建。例如：

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

详细信息：PR#11387

onWatcherCleanup()

新增 onWatcherCleanup() API，用于在 watch 中注册清理回调：

import { watch, onWatcherCleanup } from 'vue'

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

  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // 回调逻辑
  })

  onWatcherCleanup(() => {
    // 终止过期请求
    controller.abort()
  })
})