javascript - Vue.js中方法的怪异行为

我的应用程序中有一个data变量，它是message，还有一个方法可以执行一些加密算法。
这是我的密码。

export default {
  data: () => ({
    message: ""
  }),
  methods: {
    click() {
      this.message = "Hello";
      console.log("this.message ", this.message); // Prints "Hello"

      // takes around 8 seconds
      var encryptedPassphrase = generateKeystore();
      console.log("this.message ", this.message); // Prints "Hello"
    }
  }
};

上面的message变量显示在html标记中，方法click从vuetify按钮调用。
下面是HTML代码，

<div>
    <p>{{message}}</p>
    <v-btn @click="click">Click</v-btn>
</div>

发行
现在的问题是当click方法被调用时，它所做的第一个任务是更新message变量，但是这个message变量更新反映在整个函数执行完成后的html中。所以在click函数中，下一个任务是加密计算，大约需要8秒，完成后message将反映在html中。我不知道这里发生了什么。
刚才提到我在这里使用webpack。
更新

  <v-btn @click="update(); click();">Click</v-btn>

即使这不起作用，这里update方法更新message变量，它在click函数完成后更新。

最佳答案

如果希望在click方法中更改的消息数据字段在方法完成之前反映在html中，则必须将加密函数包装在Vue.nextTick中。这将确保nextTick中的逻辑将在下一个DOM更新周期中执行。这将允许用消息的最新值更新DOM，然后它将执行加密功能。否则，Vue将在DOM中反映更改之前等待click函数完成。
Vue.nextTick(function() { //cryptographic function })
https://vuejs.org/v2/api/#Vue-nextTick

关于javascript - Vue.js中方法的怪异行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54320013/