Vue 3.2正式發佈，拿來吧你

前言

8 月 5 日，Vue.js 做者尤雨溪在博客上宣佈 Vue.js 3.2 版本正式發佈。 本文的相關內容爲中文翻譯。

原文地址：blog.vuejs.org/posts/vue-3…

咱們很高興地宣佈 「Vue.js 3.2」 的發佈！此版本包括許多重要的新功能和性能改進，而且不包含重大更改。

新的SFC功能

關於單文件組件（SFC，即.vue 文件）的兩項功能已經由實驗狀態正式畢業，現提供穩定版本：

• <script setup> 是一種編譯時語法糖，可在 SFC 內使用 Composition API 時極大地改善開發者體驗。

• <style> v-bind在 SFC<style>標籤中啓用組件狀態驅動的動態 CSS 值。

下面是這兩個新功能的示例

<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>
複製代碼

感興趣的朋友，能夠閱讀它們的文檔：

• v3.vuejs.org/api/sfc-scr…
• v3.vuejs.org/api/sfc-sty…

在此基礎上<script setup>，咱們還有一個新的 RFC，經過啓用編譯器的糖改進 ref 使用體驗。

Web組件

Vue 3.2 引入了defineCustomElement一種使用 Vue 組件 API輕鬆建立原生自定義元素的新方法：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 普通Vue組件選項
})

// 註冊自定義元素。
// 註冊後，全部`<my-vue-element>` 標籤
// 頁面上的將被升級。
customElements.define('my-vue-element', MyVueElement)
複製代碼

這個 API 容許開發者建立 Vue 驅動的 UI 組件庫，這些庫能夠與任何框架一塊兒使用，或者根本沒有框架。咱們還在咱們的文檔中添加了一個關於在 Vue 中使用和建立 Web 組件的新章節。

性能改進

因爲@basvanmeurs的出色工做，3.2 對 Vue 的反應性系統進行了一些重大的性能改進。具體來講：

• 更高效的 ref 實現（約 260% 的讀取速度/約 50% 的寫入速度）
• 提高約 40%依賴項跟蹤速度
• 內存使用量減小約 17%

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

• 建立普通元素 VNode 的速度提升了約 200%
• 更積極的持續提高hoisting [1][2]

最後，有一個新的 v-memo 指令，它提供了記憶模板樹的一部分的能力。命中容許 Vue 不只跳過虛擬 DOM 差別，並且徹底跳過新 VNode 的建立。雖然不多須要，但它提供了一個逃生艙來在某些狀況下擠出最大性能，例如大型列表. v-memo v-for

使用單行添加，讓 Vue 成爲 js-framework-benchmark中最快的主流框架之一：

服務端渲染

@vue/server-renderer3.2 中的包如今提供了一個 ES 模塊構建，它也與 Node.js 內置模塊分離。 如此一來能夠經過@vue/server-renderer在非 Node.js環境運行（例如CloudFlare Workers或 Service Workers）。

咱們還改進了流式渲染 API，提供了用於渲染到Web Streams API 的新方法。查看文檔以@vue/server-renderer獲取更多詳細信息。

Effect Scope API

3.2 引入了一個新的Effect Scope API，用於直接控制反應性效果（計算和觀察者）的處理時間。它能夠更輕鬆地在組件上下文以外利用 Vue 的響應式 API，而且還解鎖了組件內部的一些高級用例。

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

有關 3.2 中全部更改的詳細列表，請參閱完整的更改日誌。

你們好，我是星野。歡迎加我微信qqlcx55，或者關注個人公衆號前端有道 點擊能夠掃碼，學習交流。