How to know when a Vue component is fully initialized?

Question

So, in my Vue component, there is an asynchronous created method and several variables with asynchronous watchers. These variables are used as v-model by elements in the template section of some components. The watcher calls other methods to change the values ​​of these variables.

This process will continue for a period of time (hundreds of milliseconds) until all data is initialized and no variables change. Now, I have some code that must run when all variables have initial values ​​defined. But the question is, how do I know that all the code in the component has been executed?

Of course I can run my code at the end of the created method, but since some elements in the template section are being updated they are used as v-model variables, these watchers run independently of the created method, while the created method completes much before the watcher. Even the mounted method exits before the watcher. Therefore, I can't just put the code at the end of the created method.

So, my question is, how can I run some code at the end of component initialization? So, after the created method, and after all watchers related to variable value changes are completed? I'm just saying about the initial running of the watcher, this is caused by the initialization of v-model, which is caused by the initialization of the element in the script section, not in the component life cycle Later watcher execution. So, I need to run it after the elements in the script section have finished initializing and the watchers associated with their v-model variables have executed.

How do i do this?

Answer 1

You can use an array of boolean flags for monitoring any number of things you need to monitor. They are all initialized as a separate array with an initial value of false, and each monitor is responsible for setting a different index to true. Once all monitors have finished running, all flags are true and by observing this array you can tell that everything has been initialized.

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 Example