vuejs3什么時(shí)候發(fā)布的

這篇文章主要為大家展示了“vuejs3什么時(shí)候發(fā)布的”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vuejs3什么時(shí)候發(fā)布的”這篇文章吧。

2020年09月18日，Vue.js3.0正式發(fā)布；vue3.0版本與其他版本完全不同，它最大限度的減少了開發(fā)人員配置工具的次數(shù)，另外增添了許多豐富的內(nèi)置功能，還附帶了一個(gè)完整的GUI用于創(chuàng)建和管理項(xiàng)目。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

2020年09月18日，Vue.js 3.0 正式發(fā)布。

歷程：

• 3.0版本代表了2年多的開發(fā)工作

• 具有30多個(gè)RFC

• 2600多個(gè)提交

• 來自99個(gè)貢獻(xiàn)者

• 628個(gè)拉取請(qǐng)求

• 大量開發(fā)和文檔工作

性能方面的優(yōu)化：

• 路由懶加載

• keep-alive緩存頁(yè)面

• 使用v-show復(fù)用DOM

• v-for 遍歷避免同時(shí)使用 v-if

• 長(zhǎng)列表性能優(yōu)化

• 事件的銷毀

• 圖片懶加載

• 第三方插件按需引入

• 無狀態(tài)的組件標(biāo)記為函數(shù)式組件

• 子組件分割

• 變量本地化

• SSR

Vue 3.2也發(fā)布了！

Vue 框架創(chuàng)始人尤雨溪在官博宣布了 Vue 3.2版本，并且在其個(gè)人社交賬號(hào)評(píng)價(jià)到：

下面我們一起來看看新版本都有哪些期待已久的新特性吧！

Vue 3.2 包括許多重要的新功能和性能改進(jìn)，就在新版本發(fā)布后不久，官方的CHANGELOG上，又增加了一個(gè) Vue 3.2.1更新，只更新了一個(gè)bug修復(fù)。

SFC的兩個(gè)新成員順利轉(zhuǎn)正

單文件組件(SFCs,aka .vue files)的兩個(gè)新功能順利從實(shí)驗(yàn)狀態(tài)畢業(yè)轉(zhuǎn)正成穩(wěn)定狀態(tài)，它們分別是：

• < script setup >：新的編譯語法糖，簡(jiǎn)而言之就是 script setup 相當(dāng)于在編譯運(yùn)行時(shí)把代碼放到了 setup 函數(shù)中運(yùn)行，然后把導(dǎo)出的變量定義到上下文中，并包含在返回的對(duì)象中；

• <style> v-bind：即在SFC的 <style> 標(biāo)簽里可以綁定一些CSS內(nèi)聯(lián)樣式。

下面是一起使用這兩個(gè)功能代碼的案例組件：

<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>

感興趣的同學(xué)可以在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>還構(gòu)建了新的RFC，旨在通過編譯器改善ref體驗(yàn)，體驗(yàn)反饋地址：https://github.com/vuejs/rfcs/discussions/369

Web 組件

Vue 3.2 引入了一個(gè)新的 defineCustomElement 方法，可以使用 Vue 組件 API 輕松創(chuàng)建原生自定義元素：

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ū)動(dòng)的UI組件庫(kù)，這些庫(kù)可以單獨(dú)使用或者與其他框架同時(shí)使用，具體如何使用，大家可以參考官方文檔：https://v3.vuejs.org/guide/web-components.html

性能提升

• 對(duì)反應(yīng)系統(tǒng)進(jìn)行重大優(yōu)化，感謝@basvanmeurs的出色表現(xiàn)

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

• 約 40% 更快的依賴跟蹤

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

• 模板編譯器改進(jìn)：

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

• 更為積極的連續(xù) hoisting

最后，該版本還提供了可實(shí)現(xiàn)部分記憶模板樹功能的 v-memo 新指令，該指令不但允許 Vue 可以完全跳過新的 VNode 創(chuàng)建步驟，還可以跳過虛擬 DOM 差異。雖然可使用的地方不多，但在特殊情況下可壓榨最大性能，例如處理大型 v-for 列表。

使用簡(jiǎn)單的單行添加，v-meno 使 Vue 成為 js-framework-benchmark 中最快的主流框架：

服務(wù)端渲染

該版本的@vue/server-renderer包提供了一個(gè) ES 模塊構(gòu)建，可實(shí)現(xiàn)與Node.js內(nèi)置模塊解耦。這樣一來，在非Node.js 運(yùn)行時(shí)中（例如CloudFlare Workers 或者 Service Workers）就可以捆綁和使用@vue/server-renderer。

與此同時(shí)，該版本還提升了流式渲染API，給 Web Streams API 渲染提供了新方法。查看@vue/server-renderer 文檔可獲得更多詳細(xì)信息：https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#streaming-api

Effect Scope API

Vue 3.2 還引入了一個(gè)新的 Effect Scope API，可用來直接控制反應(yīng)性效果（計(jì)算和觀察者）的處理時(shí)間。它可以更輕松地在組件上下文之外使用Vue響應(yīng)式API，并且解鎖組件內(nèi)部的一些高級(jí)用例。

這是一個(gè)面向庫(kù)作者的底層API，感興趣的同學(xué)可以查閱官方RFC了解更詳細(xì)的內(nèi)部原理跟案例。

以上是“vuejs3什么時(shí)候發(fā)布的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！