defineProps和立即执行函数不能一起使用的问题

最近在开发的时候碰到一个很有意思的现象，在一个组件内，我需要定义props，使用方式如下：

const props = defineProps({
  imgSrc: {
    type: String,
    require: true,
  },
});

本来这里是没有任何问题的，但是问题出在后面的代码里，我们知道Vue3的组合式API生命周期是不存在created相关的钩子函数的，如果我们希望在dom实例挂载之前做一些操作，例如请求的我们需要在onBeforeMount钩子函数中去执行。 那么除了在钩子函数中运行其实我们还可以在立即执行函数中去调用，这种调用方式是比onBeforeMount钩子触发要更快的，那我要说的问题就出在这里。我写的代码如下：

这个时候控制台会报错： 控制台告诉我们props不是一个function。很奇怪啊，我们也没有调用它啊，为什么会报这个错呢。 在Vue的官网有这样一句话：

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着<script setup> 的处理过程一同被编译掉。

这就说明在setup是将defineProps 抽离出代码独立去运行的，而defineProps方法会返回一个__props对象，之所以报错就是因为我们包裹匿名函数的括号被解析成了调用defineProps方法的返回值，既然破案了那解决问题的方法也很简单了。

1. 我们可以给立即执行函数套一个{}来作为区分。

{
  (() => {
    const img = new Image();
    console.log(111);
  })();
}

2. 我们可以在defineProps和立即执行函数之间添加方法或者变量的定义，这样也可以解决这个问题。

由此我们可以得出是在解析Vue文件拿到defineProps的时候，AST没有正确的取到defineProps相关的代码块导致的这个问题，如果感兴趣大家可以去阅读相关源码。