Vue: Add lifecycle hooks for v-show change

[niutech]

What problem does this feature solve?

There is no easy way to create a callback when the v-show condition changes and the component is shown/hidden. Using watchers is sufficient only for a single property in v-show, but it's cumbersome when the condition is like v-show="a < 1 && !b || c > 2". So I propose to add a new pair of lifecycle hooks (events): shown and hidden.

What does the proposed API look like?

shown() {
    console.log('The component is shown')
}
hidden() {
    console.log('The component is hidden')
}

[yyx990803]

v-show in its current implementation simply need to toggle a style property on a single element. Making it recursively invoke hooks on components contained inside the element makes it exponentially more complex for marginal benefits. Just use a computed property for your v-show condition instead.