Vuejs2 Vue.js-等待初始页面呈现-然后执行计算

在Nuxt.js项目中，我有一个页面，在该页面中，我需要进行一些客户端计算，然后才能在表中显示一些数据。 在计算之前和计算期间，我想显示一个加载屏幕

一些上下文：数据是农民使用的地块。这个表格应该显示过去几年在一块地上种植的作物。 数据存储在数据库中的方式如下：

绘图=[{
名称：“Plot1”，
年份：2017年，
作物：“小麦”
...
}, {
名称：“Plot1”，
年份：2018年，
作物：“玉米”，
...
} ...]

在方法中，将数据转换为以下结构的嵌套对象

数据={
“图1”：{
2017: {
‘作物’：‘小麦’，
“catchCrop”：对
},
2018: {
‘作物’：‘玉米’，
“catchCrop”：错误
}
}
...
}

并随后显示在表格组件中

组件的实体模型如下所示：

没有数据
数据（）{
返回{
加载：对，
可用数据：false
}
},
安装的（）{
这个。startCalculation（）
},
方法：{
开始计算（）{
if（store.data）{
//那么，长时间运行的计算
this.dataAvailable=true
}
此参数为0。加载=错误
}
}

我面临的问题是加载组件从未显示。 但是，

startCalculation

方法会阻塞用户界面（如果显示加载组件，则可以），并且只有在计算完成后才会更新组件

有人知道我该如何绕过这一点吗？ 提前多谢

编辑： 在摆弄之后，我可以通过设置1ms的

setTimeout

让它以我想要的方式工作。这样，将显示加载指示器，正确处理数据，然后在计算完成后成功删除加载指示器。然而，这感觉像是一个非常肮脏的黑客，我很想避免它

mounted（）{
这是真的
//设置短超时，以便Vue呈现加载条
设置超时（（）=>{
这个。startCalculation（）
此参数为0。加载=错误
},1)
}

对于以上内容，您需要使用async/await，因为

javascript

是异步的，因此不会一行接一行地执行。也就是说，如果调用了函数，引擎不会等待函数完成执行，而是并行地执行下一行

因此，当您在函数上使用async Wait时，会一行接一行地执行。 您也可以使用javascript。但是，如果您正在从存储调用某个方法，则还需要在那里添加async/await

您可以通过以下方式实现这一点

async startCalculation() {
      if (store.data) {      
        // long running calculation, then
        await calculationFunction.then(() => {
          this.loading = false
          this.dataAvailable = true
        });
      }
    }

---

我猜可能会用

`this.$nextTick().then(...DOM should be re-rendered ... do calculations)`

或者以

async

等待
样式在阻塞之前呈现
加载组件

async function(){
    await this.$nextTick()
    // do calculations sync
    // await do calculations async
    // be happy
}



编辑

另一种方法是，只需解锁代码即可。
例如，在搜索时发现的第一个vue工作程序库：

mounted(){
  this.loading = true;
  async ()=>{
    this.calculatedData= await this.$worker(doBlockingCalculation, ...args);
    this.loading = false;
  }
}

@riddhi，谢谢你的评论！我想我需要指定：
startCalculation
在本例中不是异步方法，因此不返回承诺。在应用程序的其他地方，例如从外部API加载数据的地方，在异步等待数据时显示加载指示器非常简单。但是这个用例是不同的，因为同步的方法是故意的。非常感谢你的回答！事实上，我尝试使用nextTick，但在初始化计算之前，加载组件仍然没有显示。在上面的回答中，我编辑了一个肮脏的hack，它目前导致了正确的行为，但似乎是非常糟糕的做法。这很奇怪，因为当堆栈被清空时会调用setTimeout，在本例中，与dom重新渲染一样。但一般来说，尝试使用webworker将阻塞代码外包到自己的“线程”中。然后是非阻塞；）