javascript - 在处理 DOM 的其余部分之前切换 Vue 中的事件状态

Question

我目前有一个项目，最近转移到了 Vue.js。我已经完成了迁移，一切正常，我唯一想要改进的是平板电脑等设备上的网络应用程序响应时间，这些设备没有足够的处理能力来在相当长的时间内计算所有更改。

目前我有一个项目列表，当您选择一个项目时，它会更新右侧的 DOM，其中将包含所有计算数据，并使用 v-bind:class 属性设置事件类.

有没有办法在 Vue 计算并在右侧显示更新的 DOM 信息时，在异步之前/异步切换新的事件类并删除前一个事件类(最终会进行转换)？

Answer 1

你必须将昂贵的函数包装在一个 promise 中，或者至少是一个超时。

someMethod() {
  var _this = this
  this.setnewClassHere

  var mypromise = new Promise(function(resolve, reject) {
    _this.expensiveFunction() // will runy async, so the above setNewClassHere will have effect before expensiveFunction is finished.

    resolve() // resolve the promise. This will execute the follwing .then() function.

  })
  .then(function(result) {
    _this.setBackTheClassHere
    // when async operation is finished, we set back the class
    // no idea if you need this in your case.
  })
}