javascript - VueJS - 事件发出 - 在其他计算之前显示 HTML

Question

想要:

发出事件时显示 HTML 元素，并在显示元素后运行一些计算。

但是:

HTML 元素仅在计算运行后显示。

奇怪:

控制台显示事件回调在计算之前运行。

let app = new Vue({
  el: '#app',
  data: {
    show: false
  },

  methods: {
    showCallback() {
      console.log('showCallback');
      console.log(this.show);
      this.show = true;
      console.log(this.show);
    },
    
    start() {
      this.$emit('loading-show');

      console.log('Calculation start');

      // Do some calculations
      for (let i = 1; i < 10000000000; i++) {}

      console.log('Calculation finish');
    }
  },

  mounted() {
    this.$on('loading-show', this.showCallback);
  },

  destroyed() {
    this.$off('loading-show', this.showCallback);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="start">Start</button>
  <h1 v-show="show">Shown</h1>
</div>

Answer 1

1. 您不应在测试中使用 for 循环，而应使用 setTimeout。否则您的 UI 将不会更新。

2. 使用 v-if、v-else-if 和 v-else 根据您的状态显示 HTML .

let app = new Vue({
  el: '#app',
  data: {
    show: false,
    done: false,
    
    showCallback: function() {
      console.log('showCallback');
      console.log(this.show);
      this.show = true;
      console.log(this.show);
    }
  },

  methods: {
    start() {
      this.done = false
      this.$emit('loading-show');

      console.log('Calculation start');

      // Do some calculations
      setTimeout(()=>{
        this.done = true
        console.log('Calculation finish');}, 2000)      
    }
  },

  mounted() {
    this.$on('loading-show', this.showCallback);
  },

  destroyed() {
    this.$off('loading-show', this.showCallback);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="start">Start</button>
  <h1 v-if=!show>Press Start</h1>
  <h1 v-else-if="!done">Processing</h1>
  <h1 v-else>Shown</h1>
</div>