Wie erkennt man, wann eine Vue-Komponente vollständig initialisiert ist?

Question

In meiner Vue-Komponente habe ich also eine Asynchronität created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model. Der Watcher ruft andere Methoden auf, um die Werte dieser Variablen zu ändern.

Dieser Vorgang wird eine Weile (Hunderte von Millisekunden) fortgesetzt, bis alle Daten initialisiert sind und sich keine Variablen ändern. Jetzt habe ich Code, der ausgeführt werden muss, wenn für alle Variablen Anfangswerte definiert sind. Aber die Frage ist: Woher weiß ich, dass der gesamte Code in der Komponente ausgeführt wurde?

Natürlich kann ich das am Ende der created方法的末尾运行我的代码，但是由于template部分中的一些元素正在更新它们用作v-model的变量，这些watcher独立于created方法运行，而created方法在watcher之前完成得多。甚至mounted方法在watcher之前退出。因此，我不能只是把代码放在created-Methode machen.

Meine Frage ist also: Wie kann ich am Ende der Komponenteninitialisierung Code ausführen? Führen Sie es also aus, nachdem der mit der Variablen created方法之后，以及在所有与变量值更改相关的watcher完成之后？我只是说关于watcher的初始运行，这是由v-model的初始化引起的，这是由script部分中元素的初始化引起的，而不是组件生命周期中稍后的watcher执行。所以，我需要在script部分的元素完成初始化和与它们的v-model verknüpfte Watcher ausgeführt wurde.

Wie geht das?

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示例