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