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

这篇具有很好参考价值的文章主要介绍了defineProps和立即执行函数不能一起使用的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

这个时候控制台会报错:
defineProps和立即执行函数不能一起使用的问题
控制台告诉我们props不是一个function。很奇怪啊,我们也没有调用它啊,为什么会报这个错呢。
在Vue的官网有这样一句话:

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

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

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

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

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

由此我们可以得出是在解析Vue文件拿到defineProps的时候,AST没有正确的取到defineProps相关的代码块导致的这个问题,如果感兴趣大家可以去阅读相关源码。文章来源地址https://www.toymoban.com/news/detail-405893.html

到了这里,关于defineProps和立即执行函数不能一起使用的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Kotlin,解决调用了函数但是函数体内没有执行的问题,什么时候使用invoke

    这段代码按照代码逻辑来说打印的是 123 但是没有这个打印 把foo函数转成java的代码如下 Function0表示有0个参数,Function1表示1个参数,以此类推到Function22,超过22可以使用FunctionN表示。 foo函数的返回类型是Function0。这也意味着,如果我们调用了foo(n),那么实质上仅仅是构造了

    2024年02月09日
    浏览(43)
  • 解决Jenkins执行Python脚本不能实时输出打印信息的问题

    在使用Jenkins的 shell command 来执行python脚本时,总是会等脚本执行完毕,最后一次性才把脚本中的 print 语句给打印出来; 在 print 语句后加上 sys.stdout.flush() , 就可以达到实时输出的目的了。

    2024年02月10日
    浏览(36)
  • 将 SmartAssembly 与单文件可执行文件一起使用 (.NET Core 6)

    .NET Core 6引入了创建单文件可执行文件的功能。这只允许分发一个应用程序文件,因为所有配置和依赖项都包含在二进制文件本身中。 该功能为依赖项嵌入提供了一种本机方法,这在发布生成数百个程序集的独立应用程序时最有益。它可用于依赖于框架或自包含的应用程序,

    2024年02月11日
    浏览(35)
  • 为什么defineProps宏函数不需要从vue中import导入?

    我们每天写 vue 代码时都在用 defineProps ,但是你有没有思考过下面这些问题。为什么 defineProps 不需要 import 导入?为什么不能在非 setup 顶层使用 defineProps ? defineProps 是如何将声明的 props 自动暴露给模板? 我们来看几个例子,分别对应上面的几个问题。 先来看一个正常的例

    2024年03月13日
    浏览(42)
  • 关于在微信小程序中使用taro + react-hook后销毁函数无法执行的问题

    问题: 在 taro中使用navigageTo() 跳转路由后hook中useEffect 的return函数没有执行 没有执行return函数 框架版本:      tarojs:  3.6                            react:   18.0    原因: 使用navigateTo() 跳转路由的话并不会销毁页面和组件,会加入一个最大数量为十层的路由

    2024年01月24日
    浏览(40)
  • Vue3前端开发,watch数据侦听器的立即执行

    Vue3前端开发,watch数据侦听器的立即执行!实际上,我们可以通过回调函数的后面,再追加一个对象,来设置这个参数,immediate:true.来实现一种立即执行的效果。在页面记载完成后,马上就会执行一次watch. 如上所示,我们在回调函数的后面,追加了一个参数,是一个对象类型

    2024年01月18日
    浏览(48)
  • javascript匿名函数之立即调用函数

    今天在看youtube的前端代码时发现了一个很奇怪的写法,从来没见过,代码如下: 我印象中的js函数是: 结果既 没有函数名,函数屁股后面还跟了一个大括号 ,看上去像是调用一个函数,但是奇怪的是又没有函数名。 其实上面这种写法叫做 立即调用函数表达式(IIFE Immedia

    2024年02月12日
    浏览(237)
  • 第十九章 调用Callout Library函数 - 将 $ZF(-5) 与多个库和许多函数调用一起使用

    对 $ZF(-4,1) 的调用将标注库 inputlibrary.dll 和 outputlibrary.dll 加载到虚拟内存中,并为其返回系统定义的库 ID 。 对 $ZF(-4,3) 的调用使用库 ID 和函数名称来获取库函数的 ID 。返回的函数 ID 实际上是 ZFEntry 表序列号(请参阅上一章中的“创建 ZFEntry 表”)。 第一个循环使用 $ZF(-5

    2024年01月16日
    浏览(42)
  • AD中同一网络的铺铜与导线不能连接到一起的解决方法

    博主第一次写博客,格式有些问题还请见谅 #明明是同一个网络,铺铜和导线却无法连接? 我在画板子的时候遇到了这样的问题,如图: 明明是相同的网络,但是却连接不到一起。 ##解决方法 选中这一块铺铜 在Properties中的Fill Mode中找到这个部分 点击小三角,找到Pour Over

    2024年02月11日
    浏览(49)
  • 登陆校验解决前端success回调函数始终执行问题

    有一串前端js登陆代码: 和后端代码: 存在问题: 不管前端传递的账号密码是否正确,都会成功调用success回调函数,从而导致无法判断账号密码是否匹配成功。 解决办法: 要避免无论账号密码是否正确都调用success回调函数,可以在后端代码中对账号密码进行验证,只有在

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包