vue3.0有哪些新特性

了解vue3.0有哪些新特性？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

vue3.0預(yù)計在2019年下半年左右發(fā)布，vue3.0版本與其他版本完全不同，它最大限度的減少了開發(fā)人員配置工具的次數(shù)，另外增添了許多豐富的內(nèi)置功能，還附帶了一個完整的GUI用于創(chuàng)建和管理項目

Vue的作者尤雨溪在Medium上宣布正式發(fā)布Vue CLI 3.0，它也將為很多開發(fā)者帶來期待已久的新特性。

豐富的內(nèi)置功能

尤雨溪表示，Vue CLI 3.0與其他的版本完全不同，它經(jīng)歷了重構(gòu)，目的是：

1、盡可能減少現(xiàn)代前端工具在配置上的煩惱，尤其是在開發(fā)者將多個工具混合使用時；

2、盡可能在工具鏈中加入最佳實踐，并讓其成為Vue應(yīng)用程序的默認(rèn)實踐。

Vue CLI的核心目標(biāo)是為基于webpack 4構(gòu)建的預(yù)配置構(gòu)建提供設(shè)置，目標(biāo)是最大限度地減少開發(fā)人員配置的次數(shù)，所以Vue CLI 3對具有以下特點的項目都支持開箱即用：

（1）預(yù)配置webpack功能，如模塊熱替換、代碼拆分、 搖樹優(yōu)化（tree-shaking）、高效持久化緩存等；

（2）通過Babel 7 + preset-env（Babel插件）對 ES2017進(jìn)行轉(zhuǎn)換和基于使用情況注入polyfill

（3）支持PostCSS（默認(rèn)啟用autoprefixer）和所有主要的CSS預(yù)處理器

（4）Modern mode：并行發(fā)布原生ES2017 +bundle和傳統(tǒng)bundle（詳情如下）

（5）多頁面模式：構(gòu)建具有多個HTML / JS入口點的應(yīng)用程序

（6）構(gòu)建目標(biāo)：將Vue單文件組件構(gòu)建成為庫或原生Web組件（詳情如下）

此外，你可以在創(chuàng)建新項目時混合選用多種集成：

• TypeScript

• PWA

• Vue Router & Vuex

• ESLint / TSLint / Prettier

• 用Jest或Mocha進(jìn)行單元測試

• 用Cypress 或者 Nightwatch進(jìn)行E2E 測試

而且，Vue CLI能確保上述所有功能可以很好地協(xié)同使用。

無需eject即可配置

上面列出的所有功能都支持零配置：利用Vue CLI 3構(gòu)建項目時，它會安裝Vue CLI運行時服務(wù)（@ vue / cli-service），選擇功能插件，生成必要的配置文件。也就是說，你只需要專注于你的代碼即可。

CLI工具去掉潛在的依賴關(guān)系的同時，通常也會喪失對這些依賴關(guān)系進(jìn)行微調(diào)的能力，因此，用戶通常必須“eject”，以便進(jìn)行更改。這樣做的缺點是，一旦彈出，從長遠(yuǎn)來看，你將無法升級到最新版本的工具了。

尤雨溪認(rèn)為以低級形式訪問configs 具有很重要的意義，但他不想拋棄那些“eject”的用戶，所以他找出了一種無需彈出的配置方法。

對于Babel、TypeScript和PostCSS等第三方集成來說，Vue CLI會尊重這些工具的配置文件。webpack用戶可以使用webpack-merge將簡單對象合并到最終配置中，或通過webpack-chain進(jìn)行精確定位和調(diào)整現(xiàn)有的加載器和插件。

此外，Vue CLI附帶vue inspect命令可幫助你檢查內(nèi)部Webpack配置。最大的好處是，只需小調(diào)整不需eject，你仍可以升級CLI service和插件進(jìn)行修復(fù)或更新

可擴(kuò)展的插件系統(tǒng)

Vue CLI 3插件系統(tǒng)非常強(qiáng)大：它可以在應(yīng)用程序的scaffolding階段注入依賴項和文件，并調(diào)整應(yīng)用程序的webpack配置，或在開發(fā)期間向CLI service注入其他命令。大多數(shù)像TypeScript這樣的內(nèi)置集成都使用plugin API實現(xiàn)插件功能，

而且，Vue CLI 3不再有“template”， 相反，現(xiàn)在你可以進(jìn)行遠(yuǎn)程設(shè)置，與其他開發(fā)人員共享你的插件和選項。

圖形用戶界面(GUI）

得益于Guillaume CHAU（Vue.js核心團(tuán)隊）的出色表現(xiàn)，Vue CLI 3還附帶了一個完整的GUI，不僅可以創(chuàng)建新項目，還可以管理項目中的插件和任務(wù)，例如：

它不需要Electron，只需用vue ui啟動它。

注意：雖然Vue CLI 3已處于穩(wěn)定版本，但UI仍處于測試階段，后續(xù)會持續(xù)更新。

Instant Prototyping

有時我們需要即時訪問工作環(huán)境以獲得新靈感，此時等待npm install就成為了困擾的事。使用Vue CLI 3的vue serve命令，你只需要啟用Vue單文件組件就可進(jìn)行原型設(shè)計：

更多功能

Modern Mode

有了Babel，你可以使用ES2015 +中所有最新的語言功能，但這也意味著我們需要轉(zhuǎn)譯和polyfill bundle以支持舊版本的瀏覽器。這些轉(zhuǎn)換后的包通常比原始的原生ES2015 +代碼更冗長，解析和運行速度也更慢。鑒于今天大多數(shù)現(xiàn)代瀏覽器都支持原生ES2015 +代碼，因此它也必須支持較舊的代碼，但對瀏覽器來說，運行這種低效率的代碼是一種浪費。

用“Modern Mode”可幫你解決此問題。在構(gòu)建時，使用以下命令：

vue-cli-service build --modern

Vue CLI將生成兩個版本的應(yīng)用程序：一個是支持ES模塊的現(xiàn)代瀏覽器的現(xiàn)代軟件包，以及一個不支持ES模塊的舊版瀏覽器的舊版軟件包。

生成的HTML文件自動采用Phillip Walton帖子中討論的技術(shù)：

< script type="module" >可在支持它的瀏覽器中加載現(xiàn)代軟件包； 也可用< link rel="modulepreload" >進(jìn)行預(yù)加載；

加載舊版的軟件包可以使用< script nomodule >，支持ES模塊的瀏覽器會自動忽略該軟件包。

< script nomodule >的修復(fù)程序在Safari 10會自動注入。

對于Hello World應(yīng)用程序，現(xiàn)代軟件包已經(jīng)縮小了16％。在實際應(yīng)用中，現(xiàn)代軟件包通常會顯著加快解析和評測速度，從而提高應(yīng)用程序的加載性能

注意：沒有將 modern mode作為默認(rèn)設(shè)置的原因是：如果使用CORS / CSP，則需要更長的構(gòu)建時間和一些額外的配置。

構(gòu)建Web組件

現(xiàn)在，你可以在Vue CLI 3項目中將任何*.vue組件構(gòu)建成Web組件：

vue-cli-service build --target wc --name my-element src/MyComponent.vue

這將生成一個JavaScript包，它將內(nèi)部Vue組件包裝，并注冊為頁面上的原生自定義元素，然后可以將其看做作< my-element >。

你甚至可以將多個*.vue組件構(gòu)建到具有多塊代碼拆分的包中：

vue-cli-service build --target wc-async 'src/components/*.vue'

在生成的包中包含一個小的入口文件，它將所有組件注冊為原生自定義元素，但只有在頁面上首次實例化相應(yīng)的自定義元素，才能獲取底層Vue組件的代碼。

使用Vue CLI 3，還可以使用相同的代碼庫來構(gòu)建應(yīng)用程序、UMD庫或原生Web組件。

最后，尤雨溪表示，Vue CLI 3現(xiàn)在可作為Vue應(yīng)用程序的標(biāo)準(zhǔn)構(gòu)建工具，但這僅僅是個開始。如上所述，Vue CLI的長期目標(biāo)是將當(dāng)前和未來的最佳實踐融入工具鏈中，最終為用戶提供高性能的應(yīng)用程序。

感謝各位的閱讀！看完上述內(nèi)容，你們對vue3.0有哪些新特性大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。