Vue 3.0 全家桶搶先體驗

序

就在今天凌晨 4 點左右，vue-next v3.0.0-beta.1 版本發佈，這意味着 Vue 3.0 全家桶正式登場，發佈內容包括：

• vue: Beta
• vue-router: Alpha
• vuex: Alpha
• vue-class-component: Alpha
• vue-cli: Experimental support via vue-cli-plugin-vue-next
• eslint-plugin-vue: Alpha
• vue-test-utils: Alpha
• vue-devtools: WIP
• jsx: WIP

能夠看到 Vue 3.0 beta 版本是一個項目系列，包含了咱們在開發過程當中須要的套件、webpack 插件等等，本文將帶你們快速搭建基於 Vue 3.0 的項目框架，這和以前不少 Vue 3.0 的 Demo 不一樣，是具有商業化項目能力的框架，本文將包括如下內容：

• 基於 vue-cli 快速搭建 Vue 3.0 項目
• Vue 3.0 基本特性體驗
• 集成 vue-router 和 vuex 4.0

說個題外話，今天中午我搭建 Vue 3.0 項目時，發現了 vue-router-next 一個 block 級別的 BUG，想在 vue-router-next 項目 issue 中反饋時，發現已經有人提交了類似問題，隨後晚上測試時，bug 已經被 fixed，爲 Vue 團隊的高效點贊，issue 地址，因此當你們發現使用中問題時，能夠及時到項目 issue 下進行反饋，這是一支能夠信賴的團隊！

Vue 3.0 項目初始化

Vue 3.0 項目初始化過程和 Vue 2.0 相似，具體步驟以下：

Vue 項目初始化

第一步，安裝 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，這些都是開發商業級項目必須的：

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，因此避免手動寫初始化代碼

回車後會自動安裝依賴，爲了加速安裝速度，咱們可使用淘寶源來加快初始化速度：

vue create -r https://registry.npm.taobao.org vue-next-test
複製代碼

項目建立完畢後，目錄結構以下：

.
├── 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-test
vue 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：

<template>
  <div class="test">
    <h1>test page</h1>
  </div>
</template>

<script> export default { } </script>

<style lang="less" scoped> .test { color: red; } </style>
複製代碼

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

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
複製代碼

初始化 Vue Router 的過程與 3.0 版本變化不大，只是以前採用構造函數的方式，這裏改成使用 createRouter 來建立 Vue Router 實例，配置的方法基本一致，配置完成後咱們還須要在 App.vue 中增長連接到 Test.vue 的路由：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>
複製代碼

啓動項目：

npm run serve
複製代碼

在瀏覽器中訪問項目地址，此時已經能夠跳轉到 Test 頁面：

狀態和事件綁定

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

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
  </div>
</template>

<script> import { ref } from 'vue' export default { setup () { const count = ref(0) return { count } } } </script>
複製代碼

Vue 3.0 中初始化狀態經過 setup 方法，定義狀態須要調用 ref 方法。接下來咱們定義一個事件，用來更新 count 狀態：

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <button @click="add">add</button>
  </div>
</template>

<script> import { ref } from 'vue' export default { setup () { const count = ref(0) const add = () => { count.value++ } return { count, add } } } </script>
複製代碼

這裏的 add 方法再也不須要定義在 methods 中，但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++，更新代碼後，點擊按鈕，count 的值就會更新了：

計算屬性和監聽器

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

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script> import { ref, computed, watch } from 'vue' export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) return { count, doubleCount, add } } } </script>
複製代碼

計算屬性 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 狀態：

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script> import { ref, computed, watch, getCurrentInstance } from 'vue' export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) const a = computed(() => ctx.$store.state.test.a) return { count, doubleCount, add, a } } } </script>
複製代碼

這裏咱們經過計算屬性來引用 Vuex 中的狀態：

const a = computed(() => ctx.$store.state.test.a)
複製代碼

ctx 是上節中咱們提到的當前組件實例

更新 Vuex 狀態

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

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
    <button @click="update">update a</button>
  </div>
</template>

<script> import { ref, computed, watch, getCurrentInstance } from 'vue' export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) const a = computed(() => ctx.$store.state.test.a) const update = () => { ctx.$store.commit('setTestA', count) } return { count, doubleCount, add, a, update } } } </script>
複製代碼

這裏咱們點擊 update a 按鈕後，會觸發 update 方法，此時會經過 ctx.$store.commit 調用 setTestA 方法，將 count 的值覆蓋 state.test.a 的值

總結

經過我第一時間體驗 Vue 3.0-beta 版本後，感受 Vue 3.0 已經具有了商業項目開發的必備條件，語法精煉，不論是代碼可讀性仍是運行效率都很是贊。但因爲未深刻使用，目前還沒法提出更多問題，須要在項目實戰中進一步發現和總結問題，再和你們分享交流。