作者：sam9831
鏈接：https://juejin.im/post/5e99c21b6fb9a03c590dfea8
Vue 3.0 項目初始化
Vue 3.0 項目初始化過程和 Vue 2.0 類似，具體步驟如下：
Vue 項目初始化
第一步，安裝 vue-cli：
<code>npm install -g @vue/cli/<code>
第二步，初始化 vue 項目：
<code>vue create vue-next-test/<code>
輸入命令後，會出現命令行交互窗口，這裡我們選擇 Manually select features：
<code>Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) ❯ Manually select features /<code>
隨後我們勾選：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，這些都是開發商業級項目必須的：
<code>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/<code>
注意：Vue 3.0 項目目前需要從 Vue 2.0 項目升級而來，所以為了直接升級到 Vue 3.0 全家桶，我們需要在 Vue 項目創建過程中勾選 Router 和 Vuex，所以避免手動寫初始化代碼
項目創建完畢後，目錄結構如下：
<code>.
├── 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/<code> 升級 Vue 3.0 項目
目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，vue-cli 還沒有直接支持，我們進入項目目錄，並輸入以下指令：
<code>cd vue-next-test vue add vue-next/<code>
執行上述指令後，會自動安裝 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 的路由：
啟動項目：
<code>npm run serve/<code>
在瀏覽器中訪問項目地址，此時已經可以跳轉到 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 是一個方法，裡面需要包含一個回調函數，當我們訪問計算屬性返回結果時，會自動獲取回調函數的值：
<code>const doubleCount = computed(() => count.value * 2)/<code>
監聽器 watch 同樣是一個方法，它包含 2 個參數，2 個參數都是 function：
<code>watch(() => count.value,
val => {
console.log(`count is ${val}`)
})/<code>第一個參數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回調函數，即第二個參數，第二個參數可以執行監聽時候的回調
獲取路由
Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例，然後通過 ctx 屬性獲得當前上下文，ctx.$router 是 Vue Router 實例，裡面包含了 currentRoute 可以獲取到當前的路由信息
<code>/<code>
Vuex 集成
Vuex 的集成方法如下：
定義 Vuex 狀態
第一步，修改 src/store/index.js 文件：
<code>import Vuex from 'vuex'
export default Vuex.createStore({
state: {
test: {
a: 1
}
},
mutations: {
setTestA(state, value) {
state.test.a = value
}
},
actions: {
},
modules: {
}
})/<code>Vuex 的語法和 API 基本沒有改變,我們在 state 中創建了一個 test.a 狀態，在 mutations 中添加了修改 state.test.a 狀態的方法： setTestA
引用 Vuex 狀態
第二步，在 Test.vue 中，通過計算屬性使用 Vuex 狀態：
這裡我們通過計算屬性來引用 Vuex 中的狀態：
<code>const a = computed(() => ctx.$store.state.test.a)/<code>
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 已經具備了商業項目開發的必備條件，語法精煉，不管是代碼可讀性還是運行效率都非常贊。
