前言

2020年9月19日凌晨，尤雨溪大大正式釋出了3.0版本，代號：One Piece，不要太刺激哦

Vue 從一開始就有一個簡單的使命：成為一個任何人都能快速學會的平易近人的框架。隨著我們使用者群的增長，框架的範圍也在不斷擴大，以適應不斷增長的需求。隨著時間的推移，它演變成了我們所說的「漸進式框架」：一個可以逐步學習和採用的框架，同時隨著使用者應對越來越多的需求場景而提供持續的支援。

下面是3.0版本的一些特點

在 Vue 3 中，基於物件的 2.x API 基本沒有變化，3.0 還引入了 [Composition API]，旨在解決 Vue 在大規模應用中的使用痛點，實現了類似於 React 勾點的邏輯組成和重用，比 2.x 基於物件的 API 更靈活的程式碼組織模式和更可靠的型別推理。
Vue 3 與 Vue 2 相比，在捆綁大小 (tree-shaking 時減少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和記憶體使用 (少了 54%) 方面都有[顯著的效能提升]
Vue 3 的程式碼庫是用 TypeScript 編寫的，具有自動生成，測試和捆綁的型別定義，因此它們始終是最新的。Composition API 可以很好地處理型別推斷。Vetur 是我們的官方 VSCode 擴充套件，現在利用 Vue 3 改進的內部鍵入功能支援模板表示式和 props 型別檢查。哦，如果您願意，Vue 3 的打字完全支援 TSX。
為單檔案元件 (SFC，即 `.vue` 檔案) 提出了兩個新特性：`<script setup>`和 `<style vars>`

接下來，搭建一個Vue 3.0專案練練手吧：

基於 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

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 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的同學還得再等等（還不太支援TS）

Vue 3.0基本特性體驗

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

【建立路由】

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

<template>
  <div class="test">
　　   <h1>vue3.0 初體驗</h1>
　　   <p>少年你的頭髮可還好，？？？？ 哈哈哈哈哈</p>
  </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 的過程與2.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

狀態和事件繫結

Vue中定義狀態的方法為類似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的值就會更新了

<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>

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

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

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

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

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

如果是2個以上的監聽屬性，就是這樣

watch(
  [refA, () => refB.value],
  ([a, b], [prevA, prevB]) => {
    console.log(`a is: ${a}`)
    console.log(`b is: ${b}`)
  }
)

獲取路由

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方法，這點和2.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都寫在setup裡，以前的所有資料狀態都寫在data裡，

vue 2.0所有的方法都寫在methods裡，而現在可以根據功能模組把狀態和方法劃分在一起，更利於模組化，

不過這樣對程式碼習慣和品質要求更高了，初學者用3.0可能會寫的更混亂

貌似vue逐漸react化，存在即合理

好怕vuex會被provide和inject特性給替換掉

使用

瞭解有關 Vue 3.0 的更多資訊，存取新檔案網站。如果是 Vue 2.x 使用者，存取遷移指南。

VUE 3.0初體驗