• 檢查安裝必要的依賴並正確配置 Vue 2.7 的 Composition API 支援。

npm list @vue/composition-api

• Vue 3 + <script setup>

引入元件時，就自動完成註冊

不需要手動寫 components: { ... }

使用上更精簡、開發體驗更佳

<script setup>
import MyButton from './MyButton.vue'
// 自動註冊完成！直接在 template 使用即可
</script>

<template>
  <MyButton />
</template>

• Vue 2.7 + Composition API

雖然支援 Composition API，但仍是基於 Vue 2 的元件架構

所以仍然需要 手動註冊元件：

<script>
import { defineComponent } from 'vue'
import MyButton from './MyButton.vue'

export default defineComponent({
  components: {
    MyButton
  },
  setup() {
    // 邏輯放這邊
  }
})
</script>

<template>
  <MyButton />
</template>

• 快速記憶法

Vue 3 <script setup>：「引入即註冊」

Vue 2.7：「還是得乖乖手動來」

要使用 return

// 返回要在模板中使用的數據和方法
return {
  message,      
  updateMessage
}

在 setup()

函數內部定義的變數和函數默認是私有的，模板無法訪問

只有通過 return 返回的數據和方法才能在模板中使用（如 {{ message }} 或 @click="updateMessage"）

• 封裝性更好：

這種設計允許您在 setup() 中定義一些輔助變數或函數，但不必全部暴露給模板

• 在 Vue 2.7 版本

Vue 2.7 版本（您目前使用的版本, 也是 vue2 最後版本）已經將 Composition API 直接整合到核心庫中，所以不需要再安裝額外的 @vue/composition-api 套件。您可以直接從 Vue 中引入這些功能：

• defineProps / defineEmits：用於 script setup 中定義 props 和 emits。

• onMounted, onUnmounted：替代 Vue 2 的 mounted, destroyed。