Vue.js 中方法的奇怪行为

Question

我的应用程序中有一个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"
    }
  }
};

我在 HTML 标记中显示的message变量上方，并且方法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功能完成后更新。

Answer 1

如果您希望 click 方法中更改的消息数据字段在方法完成之前反映在 html 中，则必须将加密函数包装在Vue.nextTick中。 这将确保nextTick内部的逻辑将在下一个DOM更新周期执行。 这将允许使用消息的最新值更新DOM ，然后它将执行加密功能。 否则， Vue将等待 click 函数完成，然后再将更改反映在DOM中。

Vue.nextTick(function() { //cryptographic function })

https://v2.vuejs.org/v2/api/#Vue-nextTick

Answer 2

长话短说，在这种情况下，您应该将Web Worker用于密集型任务，例如您的generateKeystore函数。 您的message没有被渲染的原因是一次只执行了一段 Javascript，基本上您的generateKeystore会阻止 Vue 渲染（观察器等），直到它完成。

我创建了一个 js fiddle 来演示 Vue - Web Worker 的用法https://jsfiddle.net/Fourzero/t9L1g2hj/17/ 。 您还可以在下面找到代码。 在此示例中， click处理程序具有您描述的相同问题（更改的消息在慢速函数完成之前不会呈现）， click2方法以立即呈现message “你好”的方式处理它，并且慢速函数启动执行（需要几秒钟）并在完成后返回值。

html

<script id="worker1" type="javascript/worker">

  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    console.log('slow function started execution inside worker with parameter: ', e.data)
    // execute slow function
    var sum = 1;
        for (let i = 1; i < 10000000000; i++) {
        sum = sum + i;
    }
    console.log('DONE!!slow function finished inside worker with result: ' + sum)
    self.postMessage(sum);
  };

</script>


<div id="app">
    <p ref="message">{{message}}</p>
    <p >slowFunctionResult: {{slowFunctionResult}}</p>
    <button @click="click">Click</button>
    <button @click="click2">Click (Run in worker)</button>
</div>

Javascript

var blob = new Blob([
  document.querySelector('#worker1').textContent
], { type: "text/javascript" })

// Note: window.webkitURL.createObjectURL() in Chrome 10+.
var worker = new Worker(window.URL.createObjectURL(blob));


new Vue({
  el: '#app',
  data: {
    message: 'xx',
    slowFunctionResult: ''
  },

  methods: {
    click() {
      this.message = 'hello';
      console.log("slow function start")
      this.slowFunction();
      console.log("slow function done")

      // the next tick won't happen until the slow function finished
    },

    click2() {
      this.message = 'hello';

      let that = this;
      worker.onmessage = function(e) {
        console.log("Received result from worker!: " + e.data);
        that.slowFunctionResult = e.data;
      }
      // DOM should be updated before the slow function execution finished
      worker.postMessage(this.message); // Start the worker.
    },


    slowFunction() {
        var sum = 1;
        for (let i = 1; i < 10000000000; i++) {
            sum = sum + i;
        }
    }
  }
})

单击Click (Run in worker)按钮的控制台输出

slow function started execution inside worker with parameter:  hello
// after a few seconds
DONE!!slow function finished inside worker with result: 49999999990067860000
Received result from worker!: 49999999990067860000