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。如果你平时不打断点调试，这篇文章对你没影响。

这篇好文章是转载于：学新通技术网