如何知道Vue组件何时完全初始化完成？

Question

所以，在我的Vue组件中，有一个异步的created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model。watcher调用其他方法来改变这些变量的值。

这个过程会持续一段时间（几百毫秒），直到所有数据都被初始化，没有变量再发生变化。现在，我有一些代码必须在所有变量都有初始值定义时运行。但问题是，我如何知道组件中的所有代码都执行完了呢？

当然，我可以在created方法的末尾运行我的代码，但是由于template部分中的一些元素正在更新它们用作v-model的变量，这些watcher独立于created方法运行，而created方法在watcher之前完成得多。甚至mounted方法在watcher之前退出。因此，我不能只是把代码放在created方法的末尾。

所以，我的问题是，如何在组件初始化的最后运行一些代码？所以，在created方法之后，以及在所有与变量值更改相关的watcher完成之后？我只是说关于watcher的初始运行，这是由v-model的初始化引起的，这是由script部分中元素的初始化引起的，而不是组件生命周期中稍后的watcher执行。所以，我需要在script部分的元素完成初始化和与它们的v-model变量相关的watcher执行之后运行它。

如何做到这一点？

Answer 1

您可以使用布尔标志的数组，用于监视您需要监视的任何数量的事物。它们都初始化为一个单独的数组，初始值为false，每个监视器负责将不同的索引设置为true。一旦所有监视器都运行完毕，所有标志都为true 并通过观察该数组，您可以知道所有内容都已初始化。

export default {
  data() {
    return {
      initialized: [false, false],
      watch1: null,
      watch2: null,
      isDone: false
    }
  },
  watch: {
    watch1(newVal) {
      if (newVal) {
        this.initialized[0] = true
      }
    },
    watch2(newVal) {
      if (newVal) {
        this.initialized[1] = true
      }
    },
    initialized: {
      handler: function (newVal) {
        if (newVal.every(i => i)) {
          this.isDone = true // initialization is completely done
        }
      },
      deep: true
    }
  },
  created() {
    setTimeout(() => {
      this.watch1 = 'some value1'
    }, 2000)

    setTimeout(() => {
      this.watch2 = 'some value2'
    }, 3000)
  }
}

Vue Playground示例