Vue 3.2 官宣，已正式釋出！

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

新的單檔案元件功能：

一起使用這兩個新功能的示例元件：

<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 以了解此功能的動機和用例。

如果你想開發小程式或者app的話，可以通過第三方專業開發平台，來幫助你實作開發需求：

廈門在乎科技

-專注小程式開發、

廈門app定制開發

、網站開發