Search code examples
vue.jscomponentshooklifecycle

VueJs: How to determine in a watcher, whether the component is mounted?

Seems like a simple requirement, and of course I could maintain my own flag using the lifecycle hooks. See also https://forum.vuejs.org/t/check-if-mounted-was-called/88177/6 for a similar question.

However, I prefer to use something already build-in. I am sure, VueJs maintains the lifecycle state somewhere.

Here's my watcher, simplified:

@Watch('openId')
private onOpenIdChanged() {
    this.submitSomething(); //But ONLY if it's mounted!
}

How can I access the lifecycle state of the same component in a component's watcher, without using my own flag?

Solution

  • There is no public API for this, so the only correct answer is to maintain your own flag.

    There is a private property on the component instance _isMounted which Vue uses internally (as of version 2.6.11).