最近在開發(fā)的時候碰到一個很有意思的現象，在一個組件內，我需要定義props，使用方式如下：
const props = defineProps({
imgSrc: {
type: String,
require: true,
},
});
本來這里是沒有任何問題的，但是問題出在后面的代碼里，我們知道Vue3的組合式API生命周期是不存在created相關的鉤子函數的，如果我們希望在dom實例掛載之前做一些操作，例如請求的我們需要在onBeforeMount鉤子函數中去執(zhí)行。
那么除了在鉤子函數中運行其實我們還可以在立即執(zhí)行函數中去調用，這種調用方式是比onBeforeMount鉤子觸發(fā)要更快的，那我要說的問題就出在這里。我寫的代碼如下：
這個時候控制臺會報錯：
控制臺告訴我們props不是一個function。很奇怪啊，我們也沒有調用它啊，為什么會報這個錯呢。
在Vue的官網有這樣一句話：
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的編譯器宏。他們不需要導入，且會隨著<script setup> 的處理過程一同被編譯掉。
這就說明在setup是將defineProps 抽離出代碼獨立去運行的，而defineProps方法會返回一個__props對象，之所以報錯就是因為我們包裹匿名函數的括號被解析成了調用defineProps方法的返回值，既然破案了那解決問題的方法也很簡單了。
1. 我們可以給立即執(zhí)行函數套一個{}來作為區(qū)分。
{
(() => {
const img = new Image();
console.log(111);
})();
}
2. 我們可以在defineProps和立即執(zhí)行函數之間添加方法或者變量的定義，這樣也可以解決這個問題。文章來源：http://www.zghlxwxcb.cn/news/detail-405893.html
由此我們可以得出是在解析Vue文件拿到defineProps的時候，AST沒有正確的取到defineProps相關的代碼塊導致的這個問題，如果感興趣大家可以去閱讀相關源碼。文章來源地址http://www.zghlxwxcb.cn/news/detail-405893.html
到了這里，關于defineProps和立即執(zhí)行函數不能一起使用的問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
