vuejs3釋出了。2020年09月18日,Vue.js3.0正式釋出;vue3.0版本與其他版本完全不同,它最大限度的減少了開發人員設定工具的次數,另外增添了許多豐富的內建功能,還附帶了一個完整的GUI用於建立和管理專案。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
2020年09月18日,Vue.js 3.0 正式釋出。
歷程:
3.0版本代表了2年多的開發工作
具有30多個RFC
2600多個提交
來自99個貢獻者
628個拉取請求
大量開發和檔案工作
效能方面的優化:
路由懶載入
keep-alive快取頁面
使用v-show複用DOM
v-for 遍歷避免同時使用 v-if
長列表效能優化
事件的銷燬
圖片懶載入
第三方外掛按需引入
無狀態的元件標記為函數式元件
子元件分割
變數在地化
SSR
Vue 3.2也釋出了!
Vue 框架創始人尤雨溪在官博宣佈了 Vue 3.2版本,並且在其個人社交賬號評價到:
下面我們一起來看看新版本都有哪些期待已久的新特性吧!
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
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% 的寫入速度)
模板編譯器改進:
建立普通元素 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
Vue 3.2 還引入了一個新的 Effect Scope API,可用來直接控制反應性效果(計算和觀察者)的處理時間。它可以更輕鬆地在元件上下文之外使用Vue響應式API,並且解鎖元件內部的一些高階用例。
這是一個面向庫作者的底層API,感興趣的同學可以查閱官方RFC瞭解更詳細的內部原理跟案例。
相關連結:
推薦學習:《》、《》
以上就是vuejs3釋出了嗎的詳細內容,更多請關注TW511.COM其它相關文章!