Vue 3 都 RC 了，前端的你还不来看看
7月18號，Vue.js 作者尤雨溪宣布 Vue 3 已進(jìn)入 RC 階段，這意味著 Vue 3 內(nèi)核的 API 和實現(xiàn)已到達(dá)穩(wěn)定狀態(tài)。
Vue 可稱得上是前端框架界的 C 位，學(xué)前端必學(xué) Vue！
無論你是小白，還是已有多年經(jīng)驗的前端，這門講解 Vue 3 的課程——《Vue.js 3 基礎(chǔ)入門實戰(zhàn)》，都一定要來學(xué)習(xí)呀！
Vue 3 介紹與安裝
實驗介紹
本節(jié)實驗是本課程的第一個實驗，主要帶領(lǐng)大家了解一下 Vue 3 beta 版對比 Vue 2.x 的重要變更，同時將為大家講解三種安裝 Vue 3 的方式。
知識點
- Vue 3.0 對比 2.x 的重要變更
- Vue 3.0 beta 版安裝
Vue.js 介紹
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。<信息來源：vue 官網(wǎng)>
Vue 是一個推陳出新的前端框架，吸收了很多前端框架的優(yōu)點。例如，Vue 借鑒了 React 的組件化和虛擬 DOM ，借鑒了 Angular 的模塊化和數(shù)據(jù)綁定。因此，我們以 Vue.js 作為入手，以后深入學(xué)習(xí)其他框架，你會發(fā)現(xiàn)他們的共通之處，更好地高效地學(xué)習(xí)。
選擇 Vue.js 的更多原因是，就框架的 API 而言，對比之下，Vue 更加輕便簡潔。Vue 自身擁有開箱即用的生態(tài)開發(fā)包（Vuex,Vue-Router）等，復(fù)雜性低、學(xué)習(xí)成本低，是一門比較好入門的前端框架。
3.0 對比 2.x 的重要變更
4 月 16 號，尤雨溪大大發(fā)布了 Vue.js 3 beta 版，State of Vue 是他上傳到 google docs 上的 slides，如果你可以有科學(xué)上網(wǎng)的條件的話你可以打開鏈接，如果不行，下面我們會為大家簡單總結(jié)一下主要內(nèi)容。
進(jìn)入 Beta 階段意味著所有被列入計劃的 RFCs 已經(jīng)實現(xiàn)了，接下來的重點是讓 Vue 3 變得更加穩(wěn)定，以及讓 vue 相關(guān)的第三方庫支持 vue 3。
Vue 3.0 相對與之前的版本，有 6 個方面的重要變更：
- Performance （性能）
- Tree-shaking support （支持 Tree-shaking）
- Composition API
- Fragment, Teleport, Suspense
- Better TypeScript support （更好的 TypeScript 支持度）
- Custom Renderer API （自定義的 Renderer API）
下面我們將具體的為大家講解一下這 6 個方面。
Performance
性能上，主要有以下這五個方面：
- Rewritten virtual dom implementation （重寫了虛擬 DOM）
- Compiler-informed fast paths （優(yōu)化編譯）
- More efficient component initialization （更高效的組件初始化）
- 1.3-2x better update performance （1.3~2 倍的更新性能）
- 2-3x faster SSR （2~3 倍的 SSR 速度）
性能上，主要是優(yōu)化了虛擬 DOM，所以也就有了更加優(yōu)化的編譯，同時實現(xiàn)了更加高效的組件初始化。
Tree-shaking support
- Most optional features (e.g. v-model, <transition>) are now tree-shakable （大多數(shù)可選功能（如 v-model、<transition>）現(xiàn)在都是支持 Tree-shaking 的。）
- Bare-bone HelloWorld size: 13.5kb. 11.75kb with only Composition API support
- All runtime features included: 22.5kb. More features but still lighter than Vue 2
在大部分情況下，我們并不需要 vue 中的所有功能，但是在之前的 vue 版本中，我們沒有一個合適的辦法用來除去不需要的功能，而 Vue3 中，為了滿足體積更小的需求，支持 Tree-shaking，也就意味著我們可以按需求引用的內(nèi)置的指令和方法。
Composition API
- Usable alongside existing Options API （可與現(xiàn)有選項 API 一起使用）
- Flexible logic composition and reuse （靈活的邏輯組成和重用）
- Reactivity module can be used as a standalone library （Reactivity 模塊可以作為獨立的庫使用）
Composition API 主要是提高了代碼邏輯的可復(fù)用性，并且將 Reactivity 模塊獨立出來，這也使得 vue 3 變得更加靈活地與其他框架組合使用。
Fragment, Teleport, Suspense
- Fragment
- No longer limited to a single root node in templates （<template> 中不再局限于單一的根節(jié)點）
- Manual render functions can simply return Arrays （render 函數(shù)可以返回數(shù)組）
- “Just works”
- Teleport
- Previously known as <Portal>（原名為 <Portal>）
- More details to be shared by @Linusborg
- Suspense
- Wait on nested async dependencies in a nested tree
- Works with async setup() （與 async 函數(shù) setup() 配合使用）
- Works with Async Components （與 Async 組件配合使用）
Better TypeScript support
- Codebase written in TS w/ auto-generated type definitions
- API is the same in JS and TS
- In fact, code will also be largely the same
- TSX support
- Class component is still supported (vue-class-component@next is currently in alpha)
vue3.0 對 TS 的支持度更高了，同時也支持 TSX 的使用；API 在 JS 與 TS 中的使用相同；類組件仍然可用，但是需要我們引入 vue-class-component@next，該模塊目前還處于 alpha 測試階段。
Custom Renderer API
- NativeScript Vue integration underway by @rigor789
- Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)
自定義 render。我們會提供一個 API 用來創(chuàng)建自定義的 render，因此你不需要為了自定義一些功能而 fork Vue 的代碼。這個特性給 Weex 和 NativeScript Vue 這樣的項目提供了很多便利。
標(biāo)簽引入模式，和平常引入 JQuery 一樣，直接下載并用 <script> 標(biāo)簽引入，我們使用的是以下這個較為穩(wěn)定的 CDN：
<!--vue版本為3.0.0-beta.14 --> <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.14/dist/vue.global.js"></script>由于非會員用戶無法訪問外網(wǎng)，所以后續(xù)的代碼中，統(tǒng)一使用引用鏈接為 <script src="https://labfile.oss.aliyuncs.com/courses/2495/vue.global.js"></script>
腳手架工具安裝
那么應(yīng)該如何搭建 Vue 3.0 項目呢，我們首先來了解第一種方式，第一種方式較為復(fù)雜，在環(huán)境中安裝的時間也較長：
與 Vue 2.x 創(chuàng)建項目的過程類似，我們可以使用腳手架工具 vue-cli 來初始化項目，首先要安裝腳手架工具：
npm install -g @vue/cli
安裝的時間稍微有點長，在安裝完成后（如上圖），我們可以測試一下我們是否安裝成功
已經(jīng)成功安裝好后，我們來初始化項目
輸入命令后，出現(xiàn)命令行交互窗口，交互窗口會出現(xiàn)較多選項，希望同學(xué)們耐心完成，第一個選項這里，我們選擇 Manually select features：
隨后我們勾選：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，移動到選項后點擊空格即可勾選，勾選完成后敲入回車進(jìn)入下一步：
選擇使用 history 路由模式，即輸入 y：
接下來選擇 css 預(yù)處理器，選擇第一個即可 Sass/SCSS，下一步選擇 eslint 配置：ESLint + Standard config
選擇什么時候執(zhí)行 eslint 校驗，我們選擇 Lint on save：
接下來是選擇以什么樣的形式配置以上所選的功能，選擇第一個 In dedicated config files：
下面一個選項是是否將之前的設(shè)置保存為一個預(yù)設(shè)模板，我們輸入 y：
接下來我們選擇 NPM 來安裝依賴
最后敲入回車，進(jìn)入安裝模式
已經(jīng)完成了初始化，目前 Vue 3.0 項目需要從 Vue 2.0 項目升級而來，因為 vue-cli 還沒有直接支持，我們通過插件升級的方式來實現(xiàn)，我們進(jìn)入項目目錄，并輸入以下指令：
執(zhí)行完后，效果如下所示，項目會自動安裝 vue-cli-plugin-vue-next 插件，該插件會完成操作：
- 在項目依賴中添加 Vue 3 beta 和 @vue/compiler-sfc
- 重新配置 webpack，用新的 Vue 3 編譯器編譯.vue 文件
- 自動遷移到 RFC-0009 中提到的一些全局 API 變化的模板。
- 自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本，但是如果未安裝則不會升級
- 自動生成 Vue Router 和 Vuex 模板代碼
我們打開配置文件（package.json）來看看安裝的 Vue 版本：3.0.0-beta.1
項目現(xiàn)在正式升級為 Vue 3.0，但是為了適應(yīng)實驗樓的線上環(huán)境我們?nèi)孕枰恍╊~外的配置，我們需要在文件的根目錄下新建一個名為 vue.config.js 的文件，將文件中心寫入如下代碼：
現(xiàn)在我們來運行一下吧，在 Terminal 中輸入：
如圖成功執(zhí)行命令后，我們點擊側(cè)邊工具欄中的 Web 服務(wù)按鈕，就可以看到一個 vue 應(yīng)用：
克隆倉庫安裝
同學(xué)們應(yīng)該也感受到了，安裝腳手架的過程顯得有些太過復(fù)雜，與其直接安裝 Vue 3，不如克隆一個項目vue-next-webpack-preview，這個項目為我們提供一個包括 Vue 3 在內(nèi)的最小的 Webpack 設(shè)置，當(dāng)我們創(chuàng)建較小項目時，可以采用這種方法。
克隆項目并安裝 npm 模塊：
git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment cd vue3-experiment npm i
安裝完成后的文件結(jié)構(gòu)如下所示：
我們來看看這個項目中的 Vue 版本：3.0.0-beta.15
與第一種方法相似，為了適應(yīng)實驗樓的線上環(huán)境我們?nèi)孕枰恍╊~外的配置，打開文件下的 webpack.config.js 文件，在 devServer{} 下添加:
接下來我們輸入以下命令來在環(huán)境中運行項目：
總結(jié)
以上是生活随笔為你收集整理的Vue 3 都 RC 了，前端的你还不来看看的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一名优秀的开发人员，空闲时间会敲代码吗
- 下一篇： 不服来战！PHP 是世界上最好的语言！