詳解Vue3中的語法糖setup
可以把 setup 語法糖理解為是使用組合式 API 的地方。
setup?選項是一個接收?props?和?context?的函數，
接收一個props和context函數并且將setup內的內容通過return暴露給組件的其余部分。
注意
在setup 中：
- 組件自動注冊，不需要額外聲明（自動將文件名定義）
- 不再聲明 beforeCreate 和 create
- 無法使用 this （所以找不到組件實例無法獲取到data、methods等）
- 屬性方法不需要 return
組合式 API 可以提高代碼的復用性與可讀性，使項目更易維護，其中包括：
- 響應式 API：?比如
ref()?和?reactive() - 生命周期鉤子：?比如
onMounted()?和?onUnmounted() - 依賴注入：比如?
provide()?和?inject() - 父子組件之間的交互：
defineProps?和?defineEmits、defineExpose
由于在執行 setup函數的時候，還沒有執行 Created 生命周期方法，所以在 setup 函數中，無法使用 data 和 methods 的變量和方法
由于我們不能在 setup函數中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函數中的this 修改成了 undefined
引入
在頁面中，組件API按需引入：
import { ref, watch, toRefs, reactive,toRef, computed, defineEmits } from 'vue';定義響應式數據
ref 與 reactive
在 setup 中，數據并不是響應式的，所以需要使用 ref 或者 reactive 對數據進行處理，也就是創建響應式數據。
