Question

让我们假设我编写了一个vue.js组件，并且我想使用包括一些异步操作的生命周期挂钩（在本例中为“ destroyed”）。我不想在异步操作完全提交之前就摆脱困境。一种选择是完全使用Javascript的异步等待功能。

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

我想问是否有任何方法可以在没有async-await的情况下进行（也许是承诺）。

Answer 1

Vue不在乎或承认您的生命周期挂钩是异步的，因此不会等待它们。考虑下面的示例。如果API按照您解释它的方式工作，则直到打印thing后，您才能看到新的console.log。但是，它会立即显示。

此外，Vue文档未声明生命周期挂钩是异步的。它没有说它们是async，也没有提供一个选项来让回调函数推断出钩子何时完成。

这与Vue具有的其他其他hook API（例如动画）形成对比。

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>

vue.js：替换异步钩子

1 个答案: