2025 年初，Vue 官方正式發布了 Vue 3.5 版本，為開發者帶來了諸多令人期待的新特性和性能優化。本文將全面解析 Vue 3.5 的核心更新內容，幫助你快速上手并應用于實際項目中。

1. 服務器端渲染（SSR）增強

(1) Lazy Hydration（懶加載水合）

Vue 3.5 引入了懶加載水合策略，通過 hydrateOnVisible() 選項，僅在組件可見時進行水合。這一功能可以減少不必要的資源消耗，提高頁面初次加載的性能。

<script setup>
import { hydrateOnVisible } from 'vue';

const lazyComponent = hydrateOnVisible(() => import('./MyComponent.vue'));
</script>

此特性對于使用 SSR 的項目，尤其是在大規模應用中，能夠顯著提升用戶體驗。

(2) useId：一致的唯一 ID 生成

新增的 useId() API 可以生成在 SSR 和客戶端之間一致的唯一 ID，解決了在 SSR 中可能出現的 ID 不一致問題。

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

const id = useId();
</script>

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

這對于生成表單元素和無障礙屬性的 ID，確保 SSR 應用中不會導致水合不匹配。

2. 自定義元素（Custom Elements）支持增強

Vue 3.5 對自定義元素的支持進一步增強，增加了多個實用的 API 和功能：

• 通過 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 = function() {
      // 錯誤處理邏輯
    };
  }
});

如果你在項目中需要使用 Web Components 或自定義元素，這些增強功能會讓你的工作更加輕松，并且能夠更好地控制和管理樣式。

3. 新增 Composition API 工具函數

(1) useTemplateRef：動態模板引用

Vue 3.5 引入了一種通過 useTemplateRef() API 獲取模板引用的新方法，支持動態 ref 綁定到變化的 ID。

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

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

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

相比之前僅限于靜態 ref 屬性的方法，useTemplateRef() 提供了更靈活的引用方式。

(2) onWatcherCleanup：觀察者清理回調

Vue 3.5 引入了一個全局導入的 API onWatcherCleanup()，用于在觀察者中注冊清理回調，避免內存泄漏。

import { watch, onWatcherCleanup } from 'vue';

watch(id, (newId) => {
  const controller = new AbortController();
  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // 回調邏輯
  });
  onWatcherCleanup(() => {
    // 中止陳舊請求
    controller.abort();
  });
});

這對于在組件卸載之前或者下一次 watch 回調執行之前進行資源清理非常有用。

(3) watch 的暫停和恢復

在一些場景中，可能需要暫停 watch 或者 watchEffect 中的回調，滿足業務條件后再恢復執行。Vue 3.5 為此提供了 pause() 和 resume() 方法。

const { stop, pause, resume } = watchEffect(() => {
  // 觀察邏輯
});

// 暫時暫停觀察者
pause();

// 恢復觀察者
resume();

// 停止觀察
stop();

這使得對觀察者的控制更加靈活，滿足復雜的業務需求。

4. Teleport 和過渡（Teleport & Transition）增強

(1) 延遲掛載（Deferred Teleport）

內置 <Teleport> 組件的一個已知限制是，傳送目標元素必須在傳送組件掛載時存在。這阻止了用戶將內容傳送到 Vue 渲染的其他元素中。

在 Vue 3.5 中，引入了一個 defer 屬性，使得 <Teleport> 組件可以延遲掛載目標元素，這對于控制復雜 UI 布局非常有幫助。

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

這種行為需要 defer 屬性，因為默認行為需要向后兼容。

5. 響應式系統性能優化

Vue 3.5 對響應式系統進行了底層重構，引入了“外星信號”（alien signals）機制，帶來了顯著的性能提升：

• 響應式性能提升 40%。
• 內存占用降低 65%。
• 響應追蹤效率提升 3 倍。

新一代響應式系統采用“槽位復用+增量 GC”策略，在大型表單場景下，內存碎片減少 82%。通過對象頭壓縮技術，每個響應式對象的內存開銷從 48 bytes 壓縮至 16 bytes，使得百萬級數據表操作成為可能。

這些優化使得 Vue 在處理大型數據集和高頻率更新的場景下，表現更加出色。

6. 工具鏈更新：Vite 6、Vitest 3、Pinia 3

Vue 3.5 的發布也伴隨著生態工具鏈的全面升級：

• Vite 6：構建速度提升 10 倍，支持 WebAssembly/WebGPU，適用于計算密集型任務。
• Vitest 3：與 Vite 6 深度協同，測試流程更加高效。
• Pinia 3：全面擁抱 Composition API，狀態管理更輕更快。

這些工具的更新，使得 Vue 的開發體驗更加流暢，構建和測試效率大幅提升。

7. 總結

Vue 3.5 的發布標志著 Vue 進入了一個新的發展階段，帶來了以下核心改進：

• 服務器端渲染性能優化。
• 自定義元素支持增強。
• Composition API 工具函數擴展。
• Teleport 和過渡功能增強。
• 響應式系統性能大幅提升。
• 生態工具鏈全面升級。

這些改進不僅提升了開發者的開發體驗，也使得 Vue 更加適用于構建復雜、高性能的現代 Web 應用。

如需了解更多詳細信息，請參考官方文檔和更新日志。