Vue 正在為 Vue 3.5 版本進行準備。這一新版本（目前處于 Alpha 階段）帶來了一系列的增強功能、新特性以及重要的改動，以提升開發者和用戶的體驗。根據官方的更新日志，我們來看看 Vue 3.5 中即將推出的內容。

github:https://github.com/vuejs/core/blob/minor/CHANGELOG.md

響應式屬性解構

響應式屬性解構已經處于實驗狀態大約一年了，但在 3.5 版本中，這一特性將作為穩定功能發布。這個功能允許你從 defineProps 宏中解構屬性而不會失去響應性。

import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // 每次父組件中的 count 屬性變化時都會觸發這個日志
  console.log(count)
})

尤雨溪 說：“幾乎所有在真實項目中大規模使用 [響應式屬性解構] 的開發者都反饋了積極的意見。他們表示，非常喜歡這個功能……希望它能穩定下來。”

對于那些不想使用這一功能的開發者，可以通過一個標志將其關閉。

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

useTemplateRef

當前聲明模板引用的過程如下：

<script setup>
// 首先定義一個值為 undefined 或 null 的 ref
// 并將生成的變量命名為你想要的名字
const divEl = ref();
</script>

<template>
<!-- 然后在模板中使用與變量相同的名字作為 `ref` 屬性的值 -->
<div ref="divEl" ></div>
</template>

這種方法有兩個問題：

1. 有時令人困惑。divEl 是響應式數據還是 DOM 元素？如果你有命名模板引用的慣例，這還不算糟，但最終你必須在模板中找到匹配的 ref= 才能確定。
2. 這也限制了你只能在組件腳本 setup 部分中定義模板引用。這意味著希望訪問 DOM 元素的組合函數必須接受模板引用作為參數。

現在使用 useTemplateRef 可以解決這兩個問題。

// MyComposable
export const useMyComposable = (options = {
  templateRef: 'el'
})=>{
  // 由于函數名稱的緣故，這顯然是一個模板引用 ?? 
  const theEl = useTemplateRef(options.templateRef);
}

// MyComponent
<script setup>
// 無需在組件中定義模板引用
// 這可以交給組合函數來處理
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>

useId

新的 useId 實用組合函數返回一個在服務器渲染和客戶端渲染之間穩定的唯一 ID（這樣可以減少應用中出現水合不匹配的風險）。這對于表單元素的 for 和 id 屬性以及可訪問性屬性非常有用。

<!--MyCustomInput-->
<script setup>
defineProps({
  label: String,
  help: String
  //...
})

const inputId = useId();
const helpTextId = useId();
</script>
<template>

<label :for="inputId">{{label}}</label>
<input :id="inputId" :aria-describedby="helpTextId"/>
<p :id="helpTextId">{{ help }}</p>

</template>

內存改進 === 更快的應用

據尤雨溪 說，“第一個顯著的變化是內部響應性重構的第二次嘗試。”重構意味著內存使用量減少了 60%，這對于任何處理大型響應式數據數組的應用來說都是一個巨大的勝利。實際上，Vue 團隊特別優化了許多常見的數組方法，使得遍歷數組的速度提高了多達 10 倍。

你可以在 DejaVue 播客的《The Future of Vue.js》這一集中聽到 Evan 自己的介紹，或者查看更新日志以獲取更多信息。

博客地址：https://www.youtube.com/watch?v=xvkf3KOaRlQ&t=890s

與 SSR 相關的改進

盡管這些內容還未寫入更新日志，Evan 提到其他與 SSR 相關的改進正在進行中，包括：

• 使用異步組件作為邊界進行延遲水合。這意味著你將能夠在定義異步組件時指定何時將用于客戶端水合組件的 JavaScript 發送到瀏覽器。
• 有選擇地允許水合不匹配，使處理客戶端和服務器之間從未期望相同的數據（如日期）變得更容易。

結論

這些只是 Vue 下一個次版本（Vue 3.5）中一些令人期待的亮點。其他的 bug 修復和新特性還包括：

• 更好的屬性類型推斷
• 支持在 Transition 內直接嵌套 Teleport
• app.onUnmount() 用于注冊清理函數
• onScopeDispose 的 failSilently 參數