Comment savoir quand un composant Vue est complètement initialisé ?

Question

Donc, dans mon composant Vue, j'ai un async created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model. L'observateur appelle d'autres méthodes pour modifier les valeurs de ces variables.

Ce processus se poursuivra pendant un certain temps (des centaines de millisecondes) jusqu'à ce que toutes les données soient initialisées et qu'aucune variable ne change. Maintenant, j'ai du code qui doit s'exécuter lorsque toutes les variables ont des valeurs initiales définies. Mais la question est : comment puis-je savoir que tout le code du composant a été exécuté ?

Bien sûr, je peux le faire à la fin de la created方法的末尾运行我的代码，但是由于template部分中的一些元素正在更新它们用作v-model的变量，这些watcher独立于created方法运行，而created方法在watcher之前完成得多。甚至mounted方法在watcher之前退出。因此，我不能只是把代码放在created méthode.

Alors, ma question est la suivante : comment puis-je exécuter du code à la fin de l'initialisation du composant ? Alors, exécutez-le après l'exécution de l'observateur associé à la variable created方法之后，以及在所有与变量值更改相关的watcher完成之后？我只是说关于watcher的初始运行，这是由v-model的初始化引起的，这是由script部分中元素的初始化引起的，而不是组件生命周期中稍后的watcher执行。所以，我需要在script部分的元素完成初始化和与它们的v-model.

Comment faire ça ?

Answer 1

Vous pouvez utiliser un tableau d'indicateurs booléens pour surveiller un certain nombre de choses que vous devez surveiller. Ils sont tous initialisés en tant que tableau distinct avec une valeur initiale false, et chaque moniteur est responsable de définir un index différent sur true. Une fois que tous les moniteurs ont fini de fonctionner, tous les indicateurs sont vrais et en observant ce tableau vous pouvez savoir que tout a été initialisé.

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)
  }
}

Exemple de terrain de jeu Vue