When using keep-alive around a child component, the situation changes. keep-alive is an abstract component provided by Vue, allowing component instances to be cached instead of being destroyed when inactive. This means that when switching to another component, the state of these components is preserved and not reinitialized.

1. Changes in Lifecycle Execution Order with keep-alive in Vue2 Parent-Child Components

In Vue 2, if you use keep-alive to wrap a child component, the execution order of lifecycle hooks changes.

The keep-alive component provides an abstraction layer to cache child components. When a child component is switched out and then switched back, its state is preserved instead of being recreated and remounted.

1.1. Lifecycle Order Without keep-alive

• Parent beforeCreate

• Parent created

• Parent beforeMount

• Child beforeCreate

• Child created

• Child beforeMount

• Child mounted

• Parent mounted

1.2. Lifecycle Order With keep-alive

When keep-alive is used around a child component, the lifecycle behaves differently. keep-alive allows Vue to cache inactive components rather than destroy them. This means that when switching between components, the state of these components is preserved and they do not reinitialize.

1.2.1. First Entry Into the Cache Area

On the first entry, it behaves similarly to not using keep-alive, as the component still needs to be created and mounted. However, when the component is activated or deactivated, additional hooks are triggered.

• Parent beforeCreate

• Parent created

• Parent beforeMount

• Child beforeCreate

• Child created

• Child beforeMount

• Child mounted

• Parent mounted

• Child activated (if keep-alive is used)

1.2.2. Switching Away From the Cache Area

When switching away from a component wrapped with keep-alive:

• Child deactivated (triggered before leaving the cache area)

• New component beforeCreate... mounted (the new component's lifecycle hooks follow the normal sequence)

1.2.3. Re-entering the Cache Area

When returning to a component that was previously cached with keep-alive:

• Child activated (triggered after re-entering the cache area)

Note: Due to the caching mechanism of keep-alive, when reactivating a cached component, the beforeCreate, created, beforeMount, and mounted hooks are not triggered again. Instead, the activated hook is directly triggered.

1.3. Summary

• First load: keep-alive does not affect the first load of a component. All lifecycle hooks are triggered in the normal order.

• Switching away: When a component is switched out, the deactivated hook is triggered.

• Re-entering: When a component is reactivated, the activated hook is triggered instead of reinitializing the component.

The activated and deactivated hooks are specific to keep-alive and are used to handle the activation and deactivation behavior of components. These hooks can be used to perform operations such as data refreshing or resource release.

Ensure that you refer to the official documentation for the latest information on lifecycle hooks and keep-alive behavior during Vue project development.