Vue: Lifecycle hooks are not triggered for a component which is wrapped by element with v-if directive.

[aleksei-a-savitski]

Vue.js version

2.0.5

Reproduction Link

http://jsfiddle.net/aleksey_beskosty/b2dn5twf/

Steps to reproduce

Open browser console and run jsfiddle code. Deselect checkbox 'Trigger'.

What is Expected?

'mounted' is printed each time when trigger changes.

What is actually happening?

'mounted' is printed only once when its parent component is rendered.

---

In my case, I have several sibling elements and render only one of them depending on v-if condition. Each element has different markup but one child component is the same. I expect that "the element and its contained directives / components are destroyed and re-constructed during toggles" as stated in docs. However, while content of conditional elements is changed, hooks on child components are not called.

[yyx990803]

This is expected behavior. When the vdom is diffing, it finds the same component in the same tree position, so it reuses the existing component instance. If you want to fully teardown and recreate the component, give them different keys.

[agm1984]

If anyone encounters this while trying to manually add event listeners for focus and blur events. For example if you are using a library that does not emit those events and therefore swallows them, you will encounter this issue because beforeDestroy is called after the DOM element is removed, so you will see an error like:

[Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property 'removeEventListener' of null"

The solution in that case can be to use event delegation and rely on the events bubbling up the DOM tree. Look at using @focusin and @focusout on your component or its parent wrapper.