大家好！在前面的文章中，我們討論了開發過程中的一些反思。
今天，我們將探討 Vue 3 中的一個重要主題：如何將 Options API 的程式碼轉換為 Composition API。我們將掌握哪些關鍵知識點，並以最直接、讓初學者也能理解的方式，說明兩者之間的對應關係。

一、引言

Vue 3 引入了全新的 Composition API，為開發者提供了更靈活的組件開發方式。如果你之前使用過 Options API，可能會對新的語法感到陌生。本篇文章將帶你一步步了解如何將 Options API 的程式碼轉換為 Composition API，並掌握其中的關鍵知識點。

二、Options API 與 Composition API 的基本概念

1. Options API

Options API 是 Vue 2 中使用的開發模式，透過在 export default 中定義 data、methods、computed、watch、mounted 等選項，來描述組件的行為。

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

2. Composition API

Composition API 是 Vue 3 引入的新特性，主要使用 語法糖，將組件的邏輯集中在一起，並透過 ref、reactive、computed 等函式來管理狀態。

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

注意： 在 Vue 3 中，使用 可以讓程式碼更簡潔，並自動處理變數的暴露。

三、為什麼要轉換到 Composition API？

• 更好的組織代碼： 將相關的邏輯聚合在一起，方便維護和閱讀。
• 更強的可重用性： 透過自定義組合函式（Composable），實現邏輯的重用。
• 更好的 TypeScript 支援： Composition API 對於 TypeScript 友好，提供了更好的類型推斷。

四、關鍵知識點與對應關係

我們將逐一介紹 Options API 中的各個部分，並說明在 Composition API 中如何實現相同的功能。

1. data -> setup 中的 ref 或 reactive

Options API：

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
}
</script>

Composition API：

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue!')
</script>

說明：

• ref 用於定義基本類型的響應式資料，如字串、數字、布林值等。
• reactive 用於定義物件或陣列的響應式資料。

如果我們需要定義一個物件，可以使用 reactive：

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello, Vue!',
})
</script>

2. methods -> setup 中的函式

Options API：

<script>
export default {
  methods: {
    greet() {
      console.log('Hello!')
    },
  },
}
</script>

Composition API：

<script setup>
function greet() {
  console.log('Hello!')
}
</script>

說明：

• 在 中直接定義函式，這些函式可以在模板中直接使用。

3. computed -> computed 函式

Options API：

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
  },
}
</script>

Composition API：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

說明：

• 使用 computed 函式來定義計算屬性，需要注意取值方式（ref 需要使用 .value）。

4. watch -> watch 函式

Options API：

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`)
    },
  },
}
</script>

Composition API：

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})
</script>

說明：

• 使用 watch 函式來監聽動態資料的變化。

5. 生命週期鉤子：mounted 等 -> onMounted 等函式

Options API：

<script>
export default {
  mounted() {
    console.log('Component mounted')
  },
}
</script>

Composition API：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})
</script>

說明：

• 使用 onMounted、onUnmounted、onUpdated 等函式來替代 mounted、beforeUnmount、updated 等生命週期hook。

6. provide/inject -> provide 和 inject 函式

Options API：
provide：

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent',
    }
  },
}
</script>

inject：

export default {
  inject: ['message'],
}
</script>

Composition API：
provide：

<script setup>
import { provide } from 'vue'

const message = 'Hello from parent'
provide('message', message)
</script>

inject：

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

說明：

• 使用 provide 和 inject 函式在組件之間共享資料。

五、完整範例對照

讓我們透過一個完整的範例，來加深理解。
Options API：

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="increment">Click {{ count }} times</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      count: 0,
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
  },
  methods: {
    increment() {
      this.count++
    },
  },
  watch: {
    count(newVal) {
      console.log(`Button clicked ${newVal} times`)
    },
  },
  mounted() {
    console.log('Component mounted')
  },
}
</script>

Composition API：

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="increment">Click {{ count }} times</button>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const count = ref(0)

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

function increment() {
  count.value++
}

watch(count, (newVal) => {
  console.log(`Button clicked ${newVal} times`)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

比較：

• 資料定義： data 中的資料在 Composition API 中使用 ref 或 reactive 定義。
• 方法： methods 中的函式直接在 中定義。
• 計算屬性： computed 中的屬性使用 computed 函式定義。
• 監聽器： watch 中的監聽器使用 watch 函式定義。
• 生命週期： mounted 使用 onMounted 函式。

六、需要掌握的要點

1. 熟悉 語法： Vue 3 中的新語法糖，讓我們可以更簡潔地編寫組件。
2. 理解 ref 和 reactive： 知道何時使用 ref，何時使用 reactive。
3. 注意響應式資料的取值： 使用 ref 定義的變數，需要透過 .value 來取值和賦值。
   • 在模板中，ref 變數可以直接使用，無需 .value。
4. 掌握 Vue 提供的函式： 如 computed、watch、onMounted 等函式的用法。
5. 避免常見錯誤：
   • 忘記導入 Vue 函式，例如 ref、computed。
   • 在模板中錯誤地使用 .value（模板會自動解包 ref）。
   • 忘記在程式碼中對 ref 變數使用 .value。

小結

透過本文的介紹，我們了解了如何將 Options API 的程式碼轉換為 Composition API，並掌握了其中的關鍵知識點。希望這些內容能夠幫助初學者更容易地理解和使用 Composition API。

在開發中，嘗試新的技術和語法可能會有些挑戰，但只要我們掌握了核心概念，就能夠靈活運用，提升開發效率和程式碼品質。

感謝你的閱讀，如果你有任何問題或建議，歡迎在下方留言討論。我們下次見！