Vue 3.2 剛剛發(fā)布！新的單文件組件，響應式性能大幅提升

技術編輯：典典丨發(fā)自 思否編輯部

公眾號：SegmentFault

<script setup> + TS + Volar = 真香

Vue 3.2 版本包括許多重要的新功能和性能改進，但并不包含重大更改。

新的單文件組件功能：

• `<script setup>` 是一種編譯時語法糖，可在 SFC 內(nèi)使用 Composition API 時極大地提升工作效率。

• `<style> v-bind` 在 SFC 標簽中啟用組件狀態(tài)驅(qū)動的動態(tài) 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>

網(wǎng)絡組件

Vue 3.2 引入了一種使用 Vue 組件 API 輕松創(chuàng)建原生自定義元素的新方法：`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 允許開發(fā)者創(chuàng)建 Vue 驅(qū)動的 UI 組件庫，這些庫可以與任何框架一起使用，或者根本沒有框架。我們還在文檔中添加了一個關于在 Vue 中使用和創(chuàng)建 Web 組件的新部分。

性能改進

由于 @basvanmeurs 的出色工作，3.2 對 Vue 的響應式系統(tǒng)進行了一些重大的性能改進。具體如下：

• 更高效的 ref 實現(xiàn)（約 260% 的讀取速度/約 50% 的寫入速度） 

• 約 40% 更快的依賴跟蹤 

• 內(nèi)存使用量減少約 17% 

模板編譯器也得到了一些改進：

• 創(chuàng)建普通元素 VNode 的速度提高了約 200% 

• 更激進的持續(xù)提升 [1] [2]

最后，有一個新的 `v-memo` 指令，它提供了記憶模板樹的一部分的能力。命中允許 Vue 不僅跳過虛擬 DOM 差異，而且完全跳過新 VNode 的創(chuàng)建。雖然很少需要，但它提供了一個逃生艙來在某些情況下擠出最大性能，例如大型列表. `v-memo` `v-for`

使用單行添加，讓 Vue 成為 js-framework-benchmark:v-memo 中最快的主流框架 `v-memo`

服務端渲染

3.2 中的包現(xiàn)在提供了一個 ES 模塊構(gòu)建，它也與 Node.js 內(nèi)置模塊分離。這使得捆綁和利用非 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，并且還解鎖了組件內(nèi)部的一些高級用例。

這是主要面向庫作者的低級 API，因此建議閱讀該功能的 RFC 以了解此功能的動機和用例。

有關 3.2 中所有更改的詳細列表，請參閱完整的更改日志。

日志地址：

https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md

原鏈接：

https://blog.vuejs.org/posts/vue-3.2.html

最后

點個在看支持我吧，轉(zhuǎn)發(fā)就更好了