vue.js: замена асинхронных хуков

Question

Давайте предположим, что я пишу компонент vue.js и хочу использовать хук жизненного цикла (в данном случае «уничтоженный»), который включает в себя некоторую асинхронную операцию.Я не хочу оставлять зацепку до полной фиксации асинхронной операции.Один из вариантов - вообще использовать функцию асинхронного ожидания в Javascript.

    export default {
      name: 'someComponent',
      data() {
        return {
          ...,
        };
      },
      async destroyed() {
         await someAsyncOperation()
     }
    }

Я хочу спросить, есть ли способ сделать это без асинхронного ожидания (возможно, обещаний).

Answer 1

Vue не заботится и не признает, что ваши хуки жизненного цикла асинхронны, они не будут ждать их.Рассмотрим пример ниже.Если бы API работал так, как вы его интерпретировали, вы не увидите новый thing до тех пор, пока не будет напечатано console.log.Тем не менее, он появляется сразу.

Кроме того, документы Vue не указывают, что хуки жизненного цикла являются асинхронными.Он не говорит, что они async, и не предоставляет опцию обратного вызова для вывода после завершения ловушки.

Это в отличие от некоторых других API подключений (например,анимации), которые есть у Vue.

const $timeout = d => new Promise(r => setTimeout(r, d));

const thing = {
  template: "<div>Count: {{text}}</div>",
  data() {
    return {
      text: "foo"
    };
  },
  async created() {
    await $timeout(1000);
    console.log("hello");
  },
  async destroyed() {
    await $timeout(1000);
    console.log("goodbye");
  }
}

const app = new Vue({
  el: "#app",
  components: {
    thing
  },
  data() {
    return {
      things: []
    }
  },
  methods: {
    addThing() {
      this.things.push({});
    },
    removeThing() {
      this.things.pop();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="addThing">+</button>
  <button @click="removeThing">-</button>
  <div v-for="thing in things">
    <thing></thing>
  </div>
</div>