Vue 框架創始人尤雨溪在官博宣布了 Vue 3.2版本，并且在其個人社交賬號評價到：
隨之有用戶在下面抱怨到，學不動了！
哈哈，一群可愛的程式員兒~
而針對用戶提到的“如果不想暴露所有變數或方法，是不是只能放棄 setup 語法糖”時，尤雨溪提醒到：“搞清楚暴露到模板和暴露到外部的區別！”
下面我們一起來看看新版本都有哪些期待已久的新特性吧！
Vue 3.2 包括許多重要的新功能和性能改進，就在新版本發布后不久，官方的CHANGELOG上，又增加了一個 Vue 3.2.1更新，只更新了一個bug修復，
SFC的兩個新成員順利轉正
單檔案組件(SFCs,aka .vue files)的兩個新功能順利從實驗狀態畢業轉正成穩定狀態，它們分別是：
< script setup >：新的編譯語法糖，簡而言之就是 script setup 相當于在編譯運行時把代碼放到了 setup 函式中運行，然后把匯出的變數定義到背景關系中，并包含在回傳的物件中；<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>
感興趣的同學可以在SFC Playground 中嘗試一番，或者閱讀官方檔案：
-
https://v3.vuejs.org/api/sfc-script-setup.html
-
https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css
此外，Vue官方基于<script setup>還構建了新的RFC，旨在通過編譯器改善ref體驗，體驗反饋地址：https://github.com/vuejs/rfcs/discussions/369
Web 組件
Vue 3.2 引入了一個新的 defineCustomElement 方法，可以使用 Vue 組件 API 輕松創建原生自定義元素：
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組件庫，這些庫可以單獨使用或者與其他框架同時使用，具體如何使用，大家可以參考官方檔案：https://v3.vuejs.org/guide/web-components.html
性能提升
-
對反應系統進行重大優化，感謝@basvanmeurs的出色表現
-
更高效的ref實作（約 260% 的讀取速度/約 50% 的寫入速度）
- 約 40% 更快的依賴跟蹤
- 記憶體使用量減少約 17%
-
模板編譯器改進：
-
創建普通元素 VNode 的速度提升約 200%
-
更為積極的連續 hoisting
最后，該版本還提供了可實作部分記憶模板樹功能的 v-memo 新指令，該指令不但允許 Vue 可以完全跳過新的 VNode 創建步驟，還可以跳過虛擬 DOM 差異，雖然可使用的地方不多，但在特殊情況下可壓榨最大性能，例如處理大型 v-for 串列，
使用簡單的單行添加，v-meno 使 Vue 成為 js-framework-benchmark 中最快的主流框架：
服務端渲染
該版本的@vue/server-renderer包提供了一個 ES 模塊構建，可實作與Node.js內置模塊解耦，這樣一來，在非Node.js 運行時中（例如CloudFlare Workers 或者 Service Workers）就可以捆綁和使用@vue/server-renderer，
與此同時，該版本還提升了流式渲染API，給 Web Streams API 渲染提供了新方法，查看@vue/server-renderer 檔案可獲得更多詳細資訊：https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#streaming-api
Effect Scope API
Vue 3.2 還引入了一個新的 Effect Scope API，可用來直接控制反應性效果（計算和觀察者）的處理時間，它可以更輕松地在組件背景關系之外使用Vue回應式API，并且解鎖組件內部的一些高級用例，
這是一個面向庫作者的底層API，感興趣的同學可以查閱官方RFC了解更詳細的內部原理跟案例，
相關鏈接：
- Vue 變更日志：https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md
- Vue 官博發布的版本更新：https://blog.vuejs.org/posts/vue-3.2.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/293224.html
標籤：其他