上一篇我們聊到了 Components 的使用方式。那讀者可能會想：網路上有些文章教 Vue2，有些文章教 Vue3，那這兩個到底差在哪？今天我們就來聊聊 Vue2 和 Vue3 的差異。

Vue2 是什麼時候的？

Vue2 是在 2016 年正式穩定版推出的，當時 React 和 Angular 都非常有名氣。Vue2 他以「簡單直觀」聞名，很多開發者都看準了他直覺的開發模式。現在還是有非常多專案使用 Vue2，但是 Vue3 是未來的趨勢，因此如果要我建議，我還是會建議直接學習 Vue3。

為什麼要有 Vue3？

隨著時間過去，專案越來越大，Vue2 的寫法開始顯得不夠靈活，尤其是當功能需要跨檔案、跨元件共享時，Options API 就會讓邏輯散落在各種地方。再來，Vue2 對 TypeScript 的支援也不算好，硬湊起來反而更麻煩。

所以 Vue 團隊在 2020 年推出了 Vue3，主要有幾個目標：

1. 讓框架更快、更省記憶體
2. 原生支援 TypeScript
3. 提供 Composition API，讓專案更靈活。

讀者可以把 Vue3 想像成「全新的引擎」，不只是升級，幾乎是重構。

差別在哪？

語法上的差別

Vue2 使用 Options API，簡單直觀，但當功能多了，就會顯得不好維護。
Vue3 則多了 Composition API，能夠把相關的資料和邏輯放在一起，讓開發者更容易拆分、重複利用。

先來看看同樣的 Counter 範例：

Vue2 Counter 範例（Options API）

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Vue3 Counter 範例（Composition API）

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

讀者可以看出兩者的差別，在開發上，肯定會是 Composition API 更加直觀。

效能上的差別

另外，Vue3 重寫了 Virtual DOM（虛擬 DOM），還做了靜態提升、記憶體優化。這些技術細節讀者不用背，但可以知道一個結果：Vue3 的效能普遍比 Vue2 更好，畫面更新更快。

TypeScript

Vue2：雖然可以搭配 TS，但就像硬把 LEGO 拚到不是 LEGO 的積木，卡卡的。
Vue3：原生就是 TypeScript 好朋友，想寫 TS 的開發者會超舒服。

生態系

現在新出的套件幾乎都是支援 Vue3，Vue2 的更新也慢慢變少。如果是新專案，開發者幾乎一定會用 Vue3。

練習：雙倍計算器

題目：請讀者自己用 Vue2 和 Vue3 各自寫一個「雙倍計算器」。就是頁面上顯示一個數字，按按鈕會 +1，下面會再顯示「數字的兩倍」。

Vue2 解答

<template>
  <div>
    <h1>計數器：{{ count }}</h1>
    <p>雙倍：{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

這裡 Vue2 用 computed 來算「雙倍」。只要 count 改變，doubleCount 就會自動更新。

我們來看答案吧！

<template>
  <div>
    <h1>計數器：{{ count }}</h1>
    <p>雙倍：{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

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

function increment() {
  count.value++
}
</script>

Vue3 也一樣用 computed，但寫法更直觀。變數跟邏輯集中在 <script setup>，讀者一眼就能看到程式的全貌。

本文結尾

讀者應該有感覺到了吧？Vue2 的 Options API，對小專案來說很直觀；但 Vue3 的 Composition API，對大型專案來說會更靈活。而且 Vue3 還有更好的效能與 TypeScript 支援，對現代前端開發者來說，幾乎是必學的技能。

下一篇，我們就會開始講 Vue 的基本語法，讓讀者動手去體驗更多有趣的功能！