Vue 3.2 剛剛釋出！新的單檔案元件，響應式效能大幅提升
今日凌晨，尤雨溪在微博平臺官宣 Vue 3.2 已釋出，並表示：
<script setup> + TS + Volar = 真香
Vue 3.2 版本包括許多重要的新功能和效能改進，但並不包含重大更改。
新的單檔案元件功能：
<script setup>是一種編譯時語法糖，可在 SFC 內使用 Composition API 時極大地提升工作效率。
<style> v-bind在 SFC 標籤中啟用元件狀態驅動的動態 CSS 值。<style>
一起使用這兩個新功能的示例元件：
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<template>
<button @click="color = color === 'red' ? 'green' : 'red'">
Color is: {{ color }}
</button>
</template>
<style scoped>
button {
color: v-bind(color);
}
</style>
網路元件
Vue 3.2 引入了一種使用 Vue 元件 API 輕鬆建立原生自定義元素的新方法：defineCustomElement
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// normal Vue component options here
})
// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)
這個 API 允許開發者建立 Vue 驅動的 UI 元件庫，這些庫可以與任何框架一起使用，或者根本沒有框架。我們還在文件中添加了一個關於在 Vue 中使用和建立 Web 元件的新部分。
效能改進
由於 @basvanmeurs 的出色工作，3.2 對 Vue 的反應性系統進行了一些重大的效能改進。具體如下：
- 更高效的 ref 實現（約 260% 的讀取速度/約 50% 的寫入速度）
- 約 40% 更快的依賴跟蹤
- 記憶體使用量減少約 17%
模板編譯器也得到了一些改進：
- 建立普通元素 VNode 的速度提高了約 200%
- 更激進的持續提升 [1] [2]
最後，有一個新的v-memo指令，它提供了記憶模板樹的一部分的能力。命中允許 Vue 不僅跳過虛擬 DOM 差異，而且完全跳過新 VNode 的建立。雖然很少需要，但它提供了一個逃生艙來在某些情況下擠出最大效能，例如大型列表.v-memo
v-for
使用單行新增，讓 Vue 成為 js-framework-benchmark:v-memo 中最快的主流框架v-memo
服務端渲染
3.2 中的包現在提供了一個 ES 模組構建，它也與 Node.js 內建模組分離。這使得捆綁和利用非 Node.js 執行時（例如 CloudFlare Workers 或 Service Workers）成為可能。@vue/server-renderer@vue/server-renderer
我們還改進了流式渲染 API，提供了用於渲染到 Web Streams API 的新方法。檢視@vue/server-renderer的文件以獲取更多詳細資訊。
效果範圍 API
3.2 引入了一個新的 Effect Scope API，用於直接控制反應性效果（計算和觀察者）的處理時間。它可以更輕鬆地在元件上下文之外利用 Vue 的響應式 API，並且還解鎖了元件內部的一些高階用例。
這是主要面向庫作者的低階 API，因此建議閱讀該功能的 RFC 以瞭解此功能的動機和用例。
有關 3.2 中所有更改的詳細列表，請參閱完整的更改日誌。
歡迎關注前端早茶，與廣東靚仔攜手共同進階
前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~
公眾號作者：廣東靚仔