vue3.0有哪些新特性

了解vue3.0有哪些新特性？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

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

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

豐富的內置功能

尤雨溪表示，Vue CLI 3.0與其他的版本完全不同，它經歷了重構，目的是：

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

2、盡可能在工具鏈中加入最佳實踐，并讓其成為Vue應用程序的默認實踐。

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

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

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

（3）支持PostCSS（默認啟用autoprefixer）和所有主要的CSS預處理器

（4）Modern mode：并行發布原生ES2017 +bundle和傳統bundle（詳情如下）

（5）多頁面模式：構建具有多個HTML / JS入口點的應用程序

（6）構建目標：將Vue單文件組件構建成為庫或原生Web組件（詳情如下）

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

• TypeScript

• PWA

• Vue Router & Vuex

• ESLint / TSLint / Prettier

• 用Jest或Mocha進行單元測試

• 用Cypress 或者 Nightwatch進行E2E 測試

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

無需eject即可配置

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

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

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

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

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

可擴展的插件系統

Vue CLI 3插件系統非常強大：它可以在應用程序的scaffolding階段注入依賴項和文件，并調整應用程序的webpack配置，或在開發期間向CLI service注入其他命令。大多數像TypeScript這樣的內置集成都使用plugin API實現插件功能，

而且，Vue CLI 3不再有“template”， 相反，現在你可以進行遠程設置，與其他開發人員共享你的插件和選項。

圖形用戶界面(GUI）

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

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

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

Instant Prototyping

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

更多功能

Modern Mode

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

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

vue-cli-service build --modern

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

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

< script type="module" >可在支持它的瀏覽器中加載現代軟件包； 也可用< link rel="modulepreload" >進行預加載；

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

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

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

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

構建Web組件

現在，你可以在Vue CLI 3項目中將任何*.vue組件構建成Web組件：

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

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

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

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

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

使用Vue CLI 3，還可以使用相同的代碼庫來構建應用程序、UMD庫或原生Web組件。

最后，尤雨溪表示，Vue CLI 3現在可作為Vue應用程序的標準構建工具，但這僅僅是個開始。如上所述，Vue CLI的長期目標是將當前和未來的最佳實踐融入工具鏈中，最終為用戶提供高性能的應用程序。

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