## 前言 昨天不是尤雨溪 不是剛在B站 直播玩了，分享了vue-next v3.0.0-beta.1 版本 哈哈， 不要太刺激哦 6大亮點  - `Performance`：效能更比`Vue 2.0`強。 - `Tree shaking support`：可以將無用模組“剪輯”，僅打包需要的。 - `Composition API`：組合`API` - `Fragment, Teleport, Suspense`：“碎片”，`Teleport`即`Protal傳送門`，“懸念” - `Better TypeScript support`：更優秀的Ts支援 - `Custom Renderer API`：暴露了自定義渲染`API` 現在就馬上進入搭建吧 包括了 - 基於 vue-cli 快速搭建 Vue 3.0 專案 - Vue 3.0 基本特性體驗 - 整合 vue-router 和 vuex 4.0 ## Vue 3.0 專案初始化 ### 第一步，安裝 vue-cli： ``` npm install -g @vue/cli ``` 注意以下命令是錯誤的！ ``` npm install -g vue npm install -g vue-cli ``` 安裝成功後，我們即可使用 vue 命令，測試方法： ``` $ vue -V @vue/cli 4.3.1 ``` ### 第二步，初始化 vue 專案： ``` vue create vue-next-test ``` 輸入命令後，會出現命令列互動視窗，這裡我們選擇 Manually select features： ``` Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) ❯ Manually select features ``` ``` 隨後我們勾選：Router、Vuex、CSS Pre-processors 和 Linter / Formatter， 這些都是開發商業級專案必須的： ``` [](javascript:void(0);) ``` Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing ``` [](javascript:void(0);) ``` 注意：Vue 3.0 專案目前需要從 Vue 2.0 專案升級而來，所以為了直接升級到 Vue 3.0 全家桶， 我們需要在 Vue 專案建立過程中勾選 Router 和 Vuex，所以避免手動寫初始化程式碼 ``` ## 升級 Vue 3.0 專案 目前建立 Vue 3.0 專案需要通過外掛升級的方式來實現， vue-cli 還沒有直接支援，我們進入專案目錄，並輸入以下指令： ``` cd vue-next-test vue add vue-next ``` 執行上述指令後，會自動安裝 vue-cli-plugin-vue-next 外掛（檢視[專案程式碼](https://github.com/vuejs/vue-cli-plugin-vue-next)），該外掛會完成以下操作： - 安裝 Vue 3.0 依賴 - 更新 Vue 3.0 webpack loader 配置，使其能夠支援 .vue 檔案構建（這點非常重要） - 建立 Vue 3.0 的模板程式碼 - 自動將程式碼中的 Vue Router 和 Vuex 升級到 4.0 版本，如果未安裝則不會升級 - 自動生成 Vue Router 和 Vuex 模板程式碼 完成上述操作後，專案正式升級到 Vue 3.0， 注意該外掛還不能支援 typescript，用 typescript 的同學還得再等等。（就是目前還不太支援TS） ## Vue 3.0 基本特性體驗 下面我們從專案開發的角度逐步體驗 Vue 3.0 的開發流程 ### 建立路由 專案開發中，我們通常需要建立新頁面，然後新增路由配置， 我們在 /src/views 目錄下建立 Test.vue： [](javascript:void(0);) ``` ``` [](javascript:void(0);) ### 建立路由 之後在 /src/router/index.js 中建立路由配置： [](javascript:void(0);) ``` import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/test', name: 'Test', component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` [](javascript:void(0);) 初始化 Vue Router 的過程與 3.0 版本變化不大，只是之前採用建構函式的方式， 這裡改為使用 createRouter 來建立 Vue Router 例項， 配置的方法基本一致，配置完成後我們還需要在 App.vue 中增加連結到 Test.vue 的路由： [](javascript:void(0);) ``` ``` [](javascript:void(0);) ### 啟動專案 ``` npm run serve ```  ## 狀態和事件繫結 Vue 3.0 中定義狀態的方法改為類似 React Hooks 的方法，下面我們在 Test.vue 中定義一個狀態 count： [](javascript:void(0);) ``` ``` [](javascript:void(0);) Vue 3.0 中初始化狀態通過 setup 方法， 定義狀態需要呼叫 ref 方法。接下來我們定義一個事件，用來更新 count 狀態： [](javascript:void(0);) ``` ``` [](javascript:void(0);) 這裡的 add 方法不再需要定義在 methods 中， 但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++， 更新程式碼後，點選按鈕，count 的值就會更新了： ## 計算屬性和監聽器 Vue 3.0 中計算屬性和監聽器的實現依賴 computed 和 watch 方法： [](javascript:void(0);) ``` ``` [](javascript:void(0);) 計算屬性 computed 是一個方法，裡面需要包含一個回撥函式，當我們訪問計算屬性返回結果時，會自動獲取回撥函式的值： ``` const doubleCount = computed(() => count.value * 2) ``` 監聽器 watch 同樣是一個方法，它包含 2 個引數，2 個引數都是 function： ``` watch(() => count.value, val => { console.log(`count is ${val}`) }) ``` 第一個引數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回撥函式，即第二個引數，第二個引數可以執行監聽時候的回撥 如果是2 個以上的監聽屬性 就這樣 [](javascript:void(0);) ``` watch( [refA, () => refB.value], ([a, b], [prevA, prevB]) => { console.log(`a is: ${a}`) console.log(`b is: ${b}`) } ) ``` [](javascript:void(0);) ## 獲取路由 Vue 3.0 中通過 getCurrentInstance 方法獲取當前元件的例項，然後通過 ctx 屬性獲得當前上下文， ctx.$router 是 Vue Router 例項，裡面包含了 currentRoute 可以獲取到當前的路由資訊 [](javascript:void(0);) ``` ``` [](javascript:void(0);) ## Vuex 整合 Vuex 的整合方法如下： ### 定義 Vuex 狀態 第一步，修改 src/store/index.js 檔案： [](javascript:void(0);) ``` import Vuex from 'vuex' export default Vuex.createStore({ state: { test: { a: 1 } }, mutations: { setTestA(state, value) { state.test.a = value } }, actions: { }, modules: { } }) ``` [](javascript:void(0);) Vuex 的語法和 API 基本沒有改變,我們在 state 中建立了一個 test.a 狀態，在 mutations 中添加了修改 state.test.a 狀態的方法： setTestA ### 引用 Vuex 狀態 第二步，在 Test.vue 中，通過計算屬性使用 Vuex 狀態： [](javascript:void(0);) ``` ``` [](javascript:void(0);) 這裡我們通過計算屬性來引用 Vuex 中的狀態： ``` const a = computed(() => ctx.$store.state.test.a) ``` ctx 是上節中我們提到的當前元件例項 ### 更新 Vuex 狀態 更新 Vuex 狀態仍然使用 commit 方法，這點和 Vuex 3.0 版本一致： [](javascript:void(0);) ``` ``` [](javascript:void(0);) 這裡我們點選 update a 按鈕後，會觸發 update 方法，此時會通過 ctx.$store.commit 呼叫 setTestA 方法，將 count 的值覆蓋 state.test.a 的值 總的效果呢是這樣的：  ## 總結 vue3.0都寫在setup裡，以前的所有資料狀態都寫在data裡， 所有方法都寫在methods裡，而現在可以根據功能模組把狀態和方法等劃分在一起，更利於模組化， 不過這樣對程式碼習慣和質量要求更高了，初學者用3.0可能會寫的更混亂 貌似 vue逐漸react化，存在即合理對吧 哈哈 好怕vuex會被provide和inject特性給替換掉。 繼續搞吧 哈哈