Vue 3.5 即將到來(lái)：探索最新特性與性能提升
Vue 正在為 Vue 3.5 版本進(jìn)行準(zhǔn)備。這一新版本（目前處于 Alpha 階段）帶來(lái)了一系列的增強(qiáng)功能、新特性以及重要的改動(dòng)，以提升開(kāi)發(fā)者和用戶的體驗(yàn)。根據(jù)官方的更新日志，我們來(lái)看看 Vue 3.5 中即將推出的內(nèi)容。
github:https://github.com/vuejs/core/blob/minor/CHANGELOG.md
響應(yīng)式屬性解構(gòu)
響應(yīng)式屬性解構(gòu)已經(jīng)處于實(shí)驗(yàn)狀態(tài)大約一年了，但在 3.5 版本中，這一特性將作為穩(wěn)定功能發(fā)布。這個(gè)功能允許你從 defineProps 宏中解構(gòu)屬性而不會(huì)失去響應(yīng)性。
import { watchEffect } from 'vue'
const { count } = defineProps(['count'])
watchEffect(() => {
// 每次父組件中的 count 屬性變化時(shí)都會(huì)觸發(fā)這個(gè)日志
console.log(count)
})尤雨溪 說(shuō)：“幾乎所有在真實(shí)項(xiàng)目中大規(guī)模使用 [響應(yīng)式屬性解構(gòu)] 的開(kāi)發(fā)者都反饋了積極的意見(jiàn)。他們表示，非常喜歡這個(gè)功能……希望它能穩(wěn)定下來(lái)?！?/p>
對(duì)于那些不想使用這一功能的開(kāi)發(fā)者，可以通過(guò)一個(gè)標(biāo)志將其關(guān)閉。
// vite.config.js
export default {
plugins: [
vue({
script: {
propsDestructure: false
}
})
]
}useTemplateRef
當(dāng)前聲明模板引用的過(guò)程如下：
<script setup>
// 首先定義一個(gè)值為 undefined 或 null 的 ref
// 并將生成的變量命名為你想要的名字
const divEl = ref();
</script>
<template>
<!-- 然后在模板中使用與變量相同的名字作為 `ref` 屬性的值 -->
<div ref="divEl" ></div>
</template>這種方法有兩個(gè)問(wèn)題：
- 有時(shí)令人困惑。divEl 是響應(yīng)式數(shù)據(jù)還是 DOM 元素？如果你有命名模板引用的慣例，這還不算糟，但最終你必須在模板中找到匹配的 ref= 才能確定。
- 這也限制了你只能在組件腳本 setup 部分中定義模板引用。這意味著希望訪問(wèn) DOM 元素的組合函數(shù)必須接受模板引用作為參數(shù)。
現(xiàn)在使用 useTemplateRef 可以解決這兩個(gè)問(wèn)題。
// MyComposable
export const useMyComposable = (options = {
templateRef: 'el'
})=>{
// 由于函數(shù)名稱的緣故，這顯然是一個(gè)模板引用 ??
const theEl = useTemplateRef(options.templateRef);
}
// MyComponent
<script setup>
// 無(wú)需在組件中定義模板引用
// 這可以交給組合函數(shù)來(lái)處理
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>useId
新的 useId 實(shí)用組合函數(shù)返回一個(gè)在服務(wù)器渲染和客戶端渲染之間穩(wěn)定的唯一 ID（這樣可以減少應(yīng)用中出現(xiàn)水合不匹配的風(fēng)險(xiǎn)）。這對(duì)于表單元素的 for 和 id 屬性以及可訪問(wèn)性屬性非常有用。
<!--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>內(nèi)存改進(jìn) === 更快的應(yīng)用
據(jù)尤雨溪 說(shuō)，“第一個(gè)顯著的變化是內(nèi)部響應(yīng)性重構(gòu)的第二次嘗試。”重構(gòu)意味著內(nèi)存使用量減少了 60%，這對(duì)于任何處理大型響應(yīng)式數(shù)據(jù)數(shù)組的應(yīng)用來(lái)說(shuō)都是一個(gè)巨大的勝利。實(shí)際上，Vue 團(tuán)隊(duì)特別優(yōu)化了許多常見(jiàn)的數(shù)組方法，使得遍歷數(shù)組的速度提高了多達(dá) 10 倍。
你可以在 DejaVue 播客的《The Future of Vue.js》這一集中聽(tīng)到 Evan 自己的介紹，或者查看更新日志以獲取更多信息。
博客地址：https://www.youtube.com/watch?v=xvkf3KOaRlQ&t=890s
與 SSR 相關(guān)的改進(jìn)
盡管這些內(nèi)容還未寫(xiě)入更新日志，Evan 提到其他與 SSR 相關(guān)的改進(jìn)正在進(jìn)行中，包括：
- 使用異步組件作為邊界進(jìn)行延遲水合。這意味著你將能夠在定義異步組件時(shí)指定何時(shí)將用于客戶端水合組件的 JavaScript 發(fā)送到瀏覽器。
- 有選擇地允許水合不匹配，使處理客戶端和服務(wù)器之間從未期望相同的數(shù)據(jù)（如日期）變得更容易。
結(jié)論
這些只是 Vue 下一個(gè)次版本（Vue 3.5）中一些令人期待的亮點(diǎn)。其他的 bug 修復(fù)和新特性還包括：
- 更好的屬性類型推斷
- 支持在 Transition 內(nèi)直接嵌套 Teleport
- app.onUnmount() 用于注冊(cè)清理函數(shù)
- onScopeDispose 的 failSilently 參數(shù)
