前端能正常跑起来但是控制台报错数据undefined之onMounted最好不要用异步写法

记录问题

在做项目的时候，项目可以正常运行，但是控制台总是报错，有一个数据是undefined。

分析问题

一般遇到这种情况，就是vue找不到这个数据。但是为什么能正常运行？说明是开始加载的时候找不到数据，但是加载完毕后，可以正常运行。虽然对项目本身没有影响，但是会报错。

如果是这种情况，有一个直接的解决方法，就是在onMounted这个生命周期，给需要赋值的变量赋一个初值。

如果赋初值还出错怎么办

这个问题就被我遇到了。在找了很多问题之后，发现前面的同事在写代码的时候，在onMounted这个生命周期函数中用到了异步写法。

异步写法的出现，会导致很多问题。一个是项目加载的顺序问题；另一个就是，既然是async，await写法，利用promise链式调用，一个请求的结果就势必会导致整个链式调用的结果。

所以，这里提出的解决办法是，不要动async里面的内容，而是在上面写一串同步代码，看看问题能不呢被成功解决。如果不能，就尝试都改成同步。

==建议都改成同步或者是有明确执行顺序的异步，否则很容易导致逻辑错乱而引起其他地方的报错。==另外需要提示的就是，当我们改了一个地方的时候，要多去测试一下与之相关的组件是否有问题，否则一个报错可能会带来一系列的反应。