作者：sam9831連結：https://juejin.im/post/5e99c21b6fb9a03c590dfea8Vue 3.0 專案初始化

Vue 3.0 專案初始化過程和 Vue 2.0 類似，具體步驟如下：

Vue 專案初始化

第一步，安裝 vue-cli：

npm install -g @vue/cli

第二步，初始化 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，這些都是開發商業級專案必須的：

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

注意：Vue 3.0 專案目前需要從 Vue 2.0 專案升級而來，所以為了直接升級到 Vue 3.0 全家桶，我們需要在 Vue 專案建立過程中勾選 Router 和 Vuex，所以避免手動寫初始化程式碼

專案建立完畢後，目錄結構如下：

.├── README.md├── babel.config.js├── package-lock.json├── package.json├── public│ ├── favicon.ico│ └── index.html└── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js ├── router │ └── index.js ├── store │ └── index.js └── views ├── About.vue └── Home.vue升級 Vue 3.0 專案

目前建立 Vue 3.0 專案需要通過外掛升級的方式來實現，vue-cli 還沒有直接支援，我們進入專案目錄，並輸入以下指令：

cd vue-next-testvue add vue-next

執行上述指令後，會自動安裝 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 的同學還得再等等。

Vue 3.0 基本特性體驗

下面我們從專案開發的角度逐步體驗 Vue 3.0 的開發流程

建立路由

專案開發中，我們通常需要建立新頁面，然後新增路由配置，我們在 /src/views 目錄下建立 Test.vue：

之後在 /src/router/index.js 中建立路由配置：

初始化 Vue Router 的過程與 3.0 版本變化不大，只是之前採用建構函式的方式，這裡改為使用 createRouter 來建立 Vue Router 例項，配置的方法基本一致，配置完成後我們還需要在 App.vue 中增加連結到 Test.vue 的路由：

啟動專案：

npm run serve

在瀏覽器中訪問專案地址，此時已經可以跳轉到 Test 頁面：

狀態和事件繫結

Vue 3.0 中定義狀態的方法改為類似 React Hooks 的方法，下面我們在 Test.vue 中定義一個狀態 count：

Vue 3.0 中初始化狀態通過 setup 方法，定義狀態需要呼叫 ref 方法。接下來我們定義一個事件，用來更新 count 狀態：

這裡的 add 方法不再需要定義在 methods 中，但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++，更新程式碼後，點選按鈕，count 的值就會更新了.

計算屬性和監聽器

Vue 3.0 中計算屬性和監聽器的實現依賴 computed 和 watch 方法：

計算屬性 computed 是一個方法，裡面需要包含一個回撥函式，當我們訪問計算屬性返回結果時，會自動獲取回撥函式的值：

const doubleCount = computed(() => count.value * 2)

監聽器 watch 同樣是一個方法，它包含 2 個引數，2 個引數都是 function：

watch(() => count.value, val => { console.log(`count is ${val}`) })

第一個引數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回撥函式，即第二個引數，第二個引數可以執行監聽時候的回撥

獲取路由

Vue 3.0 中通過 getCurrentInstance 方法獲取當前元件的例項，然後通過 ctx 屬性獲得當前上下文，ctx.$router 是 Vue Router 例項，裡面包含了 currentRoute 可以獲取到當前的路由資訊

<script> import { getCurrentInstance } from 'vue' export default { setup () { const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) } }</script>Vuex 整合

Vuex 的整合方法如下：

定義 Vuex 狀態

第一步，修改 src/store/index.js 檔案：

import Vuex from 'vuex'export default Vuex.createStore({ state: { test: { a: 1 } }, mutations: { setTestA(state, value) { state.test.a = value } }, actions: { }, modules: { }})

Vuex 的語法和 API 基本沒有改變,我們在 state 中建立了一個 test.a 狀態，在 mutations 中添加了修改 state.test.a 狀態的方法： setTestA

引用 Vuex 狀態

第二步，在 Test.vue 中，通過計算屬性使用 Vuex 狀態：

這裡我們通過計算屬性來引用 Vuex 中的狀態：

const a = computed(() => ctx.$store.state.test.a)

ctx 是上節中我們提到的當前元件例項

更新 Vuex 狀態

更新 Vuex 狀態仍然使用 commit 方法，這點和 Vuex 3.0 版本一致：

這裡我們點選 update a 按鈕後，會觸發 update 方法，此時會通過 ctx.$store.commit 呼叫 setTestA 方法，將 count 的值覆蓋 state.test.a 的值

總結

通過我第一時間體驗 Vue 3.0-beta 版本後，感覺 Vue 3.0 已經具備了商業專案開發的必備條件，語法精煉，不管是程式碼可讀性還是執行效率都非常贊。