前言
8 月 5 日，Vue.js 作者尤雨溪在博客上宣布 Vue.js 3.2 版本正式發(fā)布。 本文的相關(guān)內(nèi)容為中文翻譯。
我們很高興地宣布 “Vue.js 3.2” 的發(fā)布！此版本包括許多重要的新功能和性能改進(jìn)，并且不包含重大更改。
新的SFC功能
關(guān)于單文件組件（SFC，即.vue 文件）的兩項(xiàng)功能已經(jīng)由實(shí)驗(yàn)狀態(tài)正式畢業(yè)，現(xiàn)提供穩(wěn)定版本：
<script setup>是一種編譯時(shí)語法糖，可在 SFC 內(nèi)使用 Composition API 時(shí)極大地改善開發(fā)者體驗(yàn)。<style> v-bind在 SFC<style>標(biāo)簽中啟用組件狀態(tài)驅(qū)動(dòng)的動(dòng)態(tài) CSS 值。
下面是這兩個(gè)新功能的示例
<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>
感興趣的朋友，可以閱讀它們的文檔：
- https://v3.vuejs.org/api/sfc-script-setup.html
- https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css
在此基礎(chǔ)上<script setup>，我們還有一個(gè)新的 RFC，通過啟用編譯器的糖改進(jìn) ref 使用體驗(yàn)。
Web組件
Vue 3.2 引入了defineCustomElement一種使用 Vue 組件 API輕松創(chuàng)建原生自定義元素的新方法：
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// 普通Vue組件選項(xiàng)
})
// 注冊自定義元素。
// 注冊后，所有`<my-vue-element>` 標(biāo)簽
// 頁面上的將被升級。
customElements.define('my-vue-element', MyVueElement)
這個(gè) API 允許開發(fā)者創(chuàng)建 Vue 驅(qū)動(dòng)的 UI 組件庫，這些庫可以與任何框架一起使用，或者根本沒有框架。我們還在我們的文檔中添加了一個(gè)關(guān)于在 Vue 中使用和創(chuàng)建 Web 組件的新章節(jié)。
性能改進(jìn)
由于@basvanmeurs的出色工作，3.2 對 Vue 的反應(yīng)性系統(tǒng)進(jìn)行了一些重大的性能改進(jìn)。具體來說：
- 更高效的 ref 實(shí)現(xiàn)（約 260% 的讀取速度/約 50% 的寫入速度）
- 提升約 40%依賴項(xiàng)跟蹤速度
- 內(nèi)存使用量減少約 17%
模板編譯器也得到了一些改進(jìn)：
- 創(chuàng)建普通元素 VNode 的速度提高了約 200%
- 更積極的持續(xù)提升hoisting [1][2]
最后，有一個(gè)新的 v-memo 指令，它提供了記憶模板樹的一部分的能力。命中允許 Vue 不僅跳過虛擬 DOM 差異，而且完全跳過新 VNode 的創(chuàng)建。雖然很少需要，但它提供了一個(gè)逃生艙來在某些情況下擠出最大性能，例如大型列表. v-memo v-for
使用單行添加，讓 Vue 成為 js-framework-benchmark中最快的主流框架之一：
服務(wù)端渲染
@vue/server-renderer3.2 中的包現(xiàn)在提供了一個(gè) ES 模塊構(gòu)建，它也與 Node.js 內(nèi)置模塊分離。
如此一來可以通過@vue/server-renderer在非 Node.js環(huán)境運(yùn)行（例如CloudFlare Workers或 Service Workers）。
我們還改進(jìn)了流式渲染 API，提供了用于渲染到Web Streams API 的新方法。查看文檔以@vue/server-renderer獲取更多詳細(xì)信息。
Effect Scope API
3.2 引入了一個(gè)新的Effect Scope API，用于直接控制反應(yīng)性效果（計(jì)算和觀察者）的處理時(shí)間。它可以更輕松地在組件上下文之外利用 Vue 的響應(yīng)式 API，并且還解鎖了組件內(nèi)部的一些高級用例。
這是主要面向庫作者的低級 API，因此建議閱讀該功能的RFC以了解此功能的動(dòng)機(jī)和用例。
有關(guān) 3.2 中所有更改的詳細(xì)列表，請參閱完整的更改日志。
關(guān)于我
大家好，我是星野。歡迎加我微信
qqlcx55，或者關(guān)注我的公眾號前端有道 點(diǎn)擊可以掃碼，學(xué)習(xí)交流。
