vue项目启动后,在浏览器调试过程,打断点的时候,在async包裹的函数,this识别不了,但是代码的console.log可以正常打印出this,但是在
如果你平时不打断点调试前端代码,这篇文章对你没影响。
问题描述
vue项目启动后,在浏览器调试过程中,打断点的时候,在async包裹的函数中,this识别不了,但是代码中的console.log可以正常打印出this,但是在浏览器的控制台打印是undefined,鼠标移上去也是错误的,在浏览器上下文的展示的this也是错误的。 在这里记录一下。
说明:
在浏览器中调试Vue项目时,当在async包裹的函数中设置断点时,this可能会被错误地识别。这可能是因为async/await语法在编译过程中可能会改变this的上下文。
当你在开发环境下使用Vue CLI启动项目时,默认会启用Webpack的Devtool调试工具,以提供更好的调试体验。然而,在异步函数中,执行上下文可能会发生变化,导致断点处的this指向错误。
在控制台中打印this时,确实会显示正确的this值,这是因为控制台在执行输出时会以单独的上下文来处理。
为了解决这个问题,可以尝试以下方法:
1. 可以尝试在await语句之前将this绑定到函数中。
例如:
myAsyncFunction: async function() {
const self = this;
// ...
await someAsyncOperation().then(function() {
// 在这里使用self而不是this
});
}
这样做可以确保在异步操作完成后能够正确地访问到this。
2. 手动指定断点位置:在异步操作的前一行或后一行添加一个简单的console.log语句,然后将其设置为断点。这样可以确保在正确的位置设置断点。
需要注意的是,这些问题仅出现在浏览器的开发者工具中调试时,实际上的代码执行并不受影响。因此,如果你在浏览器上下文的展示中看到this是错误的,但代码逻辑仍然正常执行,那么你可以继续进行调试和代码调整,不会影响实际运行。
真实项目调试如图:
## 注意:
这里要讲的不是const _this=this; 这里将这句代码去掉,后边依旧使用this,代码运行依然没有任何问题,只是你在调试的时候,浏览器调试断点位置,识别不了this。如果你平时不打断点调试,这篇文章对你没影响。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgijagg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13