vue.js：替换异步钩子答案

【问题标题】：vue.js: replacement for async hooksvue.js：替换异步钩子
【发布时间】：2018-12-21 11:39:47
【问题描述】：

假设我编写了一个 vue.js 组件，并且我想使用包含一些异步操作的生命周期钩子（在本例中为“已销毁”）。我不想在异步操作完全提交之前离开钩子。一种选择是完全使用 Javascript 的 async-await 功能。

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

我想问是否有任何方法可以在没有 async-await 的情况下（可能是承诺）来做到这一点。

【问题讨论】：

如果我可以问一下什么是反对 async/await 的？
没什么。这是一个很棒的功能。但是，我想知道如果我使用没有此功能的旧版本的 js（例如 ECMA 5）会怎样。我怎样才能让他们完成这项工作？
我认为使用 beforeDestroy 生命周期钩子和旧版本的异步语法应该适合您的需要
您似乎认为 async/await 使异步调用同步。事实并非如此。代码仍然异步运行，Vue 不会等待它运行。
很确定它根本行不通；至少，它不会在销毁之前等待异步代码执行。但是如果你需要在旧浏览器上使用 async/await，为什么不使用 Babel 和 webpack 为你抽象出这个问题呢？

标签： javascript vue.js async-await

【解决方案1】：

Vue 不关心或承认你的生命周期钩子是异步的，它不会等待等待它们。考虑下面的例子。如果 API 以您解释它的方式工作，则在打印 console.log 之前，您不会看到新的 thing。但是，它会立即出现。

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

这与 Vue 拥有的其他一些钩子 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>

【讨论】：

好点。您的实际意思是 async/await 是一种语法糖，它使 Promises 更容易。这不是语言的新能力。