Vue-next: Activated hook for directives

[syuilo]

What problem does this feature solve?

component's keep-alive activated and deactivated hooks should also be available in directives.

For example, suppose you have a directive that adds a class based on the size of an element. When the component to which the directive is added is in a keep-alive, the directive's mounted hook will be called, even if it is not actually mounted in the DOM, and the size of the element will be zero. If we can detect that a component with a directive bound to it is now active, we can get the correct size.

Thank you!

What does the proposed API look like?

app.directive('my-directive', {
  activated() { ... },
  deactivated() { ... },
})

[justintaddei]

This would be very helpful my v-shared-element library as well. I hope this gets implemented!

[shameleo]

My use case is v-keep-scroll directive.
In Chrome elements loose their scroll positions when detouched from DOM, so the directive fixes it. It saves scroll positions in attributes and restores it when component is activated. Can't port it to Vue 3. It used non-public 'hook:activated' event in Vue 2.

[LinusBorg]

Note: at least for Browser environments, you should be able to use Node.isConnected (at least for some use cases) to check wether the element is in the DOM (=component is active) or not (=component is deactivatdd by keep-alive)

[shameleo]

Yep, but I need event, not just property.

[justintaddei]

Same thing here. I'm using the activated hook to tell when I need to record the position of the elements and animate from their previous state. Simply haven't a property would not work for my case.