Comment savoir quand un composant Vue est complètement initialisé ?
P粉909476457
P粉909476457 2024-04-05 14:20:24
0
1
1462

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 ?

P粉909476457
P粉909476457

répondre à tous(1)
P粉724256860

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!