Bagaimana untuk mengetahui apabila komponen Vue dimulakan sepenuhnya?

Question

Jadi, dalam komponen Vue saya, saya mempunyai async created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model. Pemerhati memanggil kaedah lain untuk menukar nilai pembolehubah ini.

Proses ini akan berterusan untuk seketika (beratus-ratus milisaat) sehingga semua data dimulakan dan tiada pembolehubah berubah. Sekarang, saya mempunyai beberapa kod yang mesti dijalankan apabila semua pembolehubah mempunyai nilai awal yang ditentukan. Tetapi persoalannya, bagaimana saya tahu bahawa semua kod dalam komponen telah dilaksanakan?

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

Jadi, soalan saya ialah, bagaimana saya boleh menjalankan beberapa kod pada akhir permulaan komponen? Jadi, jalankannya selepas pemerhati yang dikaitkan dengan pembolehubah created方法之后，以及在所有与变量值更改相关的watcher完成之后？我只是说关于watcher的初始运行，这是由v-model的初始化引起的，这是由script部分中元素的初始化引起的，而不是组件生命周期中稍后的watcher执行。所以，我需要在script部分的元素完成初始化和与它们的v-model dilaksanakan.

Bagaimana untuk melakukan ini?

Answer 1

Anda boleh menggunakan pelbagai bendera boolean untuk memantau sebarang bilangan perkara yang anda perlu pantau. Kesemuanya dimulakan sebagai tatasusunan berasingan dengan nilai awal palsu, dan setiap monitor bertanggungjawab untuk menetapkan indeks yang berbeza kepada benar. Setelah semua monitor selesai dijalankan, semua bendera adalah benar dan dengan memerhati tatasusunan ini anda boleh tahu bahawa semuanya telah dimulakan.

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

Contoh Taman Permainan Vue