Javascript Vue虚拟DOM在随后进行昂贵的计算时不会立即更新

我正在尝试添加一个加载屏幕，在我的应用程序对一些数据进行昂贵的哈希和解密时显示（需要2-3秒）。当我按照应该更新DOM的内容实验性地删除昂贵的部分时，屏幕会立即加载。否则，直到昂贵的函数完成后才会渲染。知道我搞砸了什么吗

导出默认值{
数据（）{
返回{
加载：false，
密码：“”
}
},
方法：{
异步解锁（）{
这是。加载=真；
等待此消息。$nextTick（）
//DOM应该更新，但它不更新
试一试{
等待此。$root.UnlockVaultPassword（此.password）；
}捕捉（错误）{
这一点：加载=错误；
返回；
}
//使用哈希和加密完成DOM更新后
这一点：加载=错误；
这是.$router.push（{name:'vault'}）；
}
}
}

是否可以尝试使用安装的

挂钩？并在
$nextTick
之后调用
unlock
函数作为单独的操作，以实现问题的良好分离

  mounted () {
    this.loading = true;

    this.$nextTick(function () {
      this.unlock();
    })
  }

  methods: {
    unlock: function() {
      // unlock code
      this.loading = false;
    }
  }

更新：尝试使用一个处理函数，首先在表单提交时设置
加载
，然后将
解锁
作为对
$nextTick
的回调，如下所示：

  methods: {
    handleFormSubmit: function() {
      this.loading = true;
      this.$nextTick(this.unlock);
    },
    unlock: function() {
      // unlock code
      this.loading = false;
    }
  }

更新2：如果上述任何一项都不起作用，则听起来像是
$nextTick
的预期行为中的错误，因为在执行以下代码之前，渲染没有完成。如果使用
setTimeout
将解锁进程强制到执行堆栈的末尾，会发生什么情况

  methods: {
    handleFormSubmit: function() {
      this.loading = true;
      this.$nextTick(() => {
        setTimeout(this.unlock, 0);
      });
    },
    unlock: function() {
      // unlock code
      this.loading = false;
    }
  }

所以我找到了一个解决办法。。。我不喜欢，但也不太可怕。实际上，我可以将回调推送到事件循环上，这样只有在渲染完成后才会进行哈希处理


导出默认值{
数据（）{
返回{
加载：false，
密码：“”
}
},
方法：{
异步解锁（）{
这是。加载=真；
设置超时（（）=>{
试一试{
等待此。$root.UnlockVaultPassword（此.password）；
}捕捉（错误）{
这一点：加载=错误；
返回；
}
这一点：加载=错误；
这是.$router.push（{name:'vault'}）；
}, 0)
}
}
}
设置
this.loading=true
单独触发重新加载？正确。这肯定与计算开销有关。试试这个如何。$forceUpdate（）强制vue更新DOM。注意
$forceUpdate
：它不会重新呈现所有子元素。是的，我试过了，不起作用。渲染将被触发，但由于某种原因，哈希会相互干扰。问题是“解锁”函数是在表单Submith上触发的。但是在回调中传递
unlock
到
$nextTick
怎么样？让我修改一下我的示例。我的想法是可能存在一个竞争条件，其中执行
$nextTick
，但在调用
UnlockVaultPassword
时，DOM尚未完全重新呈现。另一个建议是：将复杂的散列/解密过程卸载到异步进程中，或者在后端，或者可能。不管怎样，如果你的解密代码将单线程JS进程锁定2-3秒，可能会对性能有好处。不幸的是，同样的效果，我无法卸载到后端，因为应用程序不依赖后端（electron）