Handle loading states. Support error states. Implement loading component. Handle async lifecycle. Support component loading.
beforeCreate runs before instance initialization. Cannot access reactive data or events. Used for plugin initialization. Composition API setup() runs before this hook.
Composition API uses on* prefixed functions for lifecycle hooks. Must be called synchronously in setup(). Support multiple calls. Return cleanup functions.
Return cleanup function from setup hooks. Remove event listeners. Clear timers. Cancel subscriptions. Handle resource cleanup.
Mixin hooks merge with component hooks. Handle hook ordering. Support hook composition. Implement mixin strategies.
Use Vue Devtools. Handle hook debugging. Support logging. Implement debugging strategies. Handle hook inspection.
Implement deployment strategies. Handle environment configuration. Support production optimization. Implement deployment patterns.
Implement version updates. Handle migration strategies. Support backwards compatibility. Implement migration patterns.
Lifecycle hooks are special methods that allow executing code at specific stages of a component's life. Include creation, mounting, updating, and destruction phases. Available in both Options API and Composition API.
mounted executes when component is mounted to DOM. Can access DOM elements and refs. Good for DOM manipulations and third-party library initialization. Composition API: onMounted.
beforeMount executes before DOM mounting begins. Template is compiled but not mounted. Cannot access DOM elements. Composition API: onBeforeMount.
beforeUpdate runs before DOM updates after data change. Can access old DOM state. Good for saving state before update. Composition API: onBeforeUpdate.
beforeUnmount executes before component unmounting starts. Component still fully functional. Good for cleanup initialization. Composition API: onBeforeUnmount.
Use errorCaptured hook or try/catch. Handle error states. Support error recovery. Implement error boundaries. Handle error reporting.
Test hook execution order. Handle async testing. Support component mounting. Implement test utilities. Handle test scenarios.
Minimize hook operations. Handle heavy computations. Support performance optimization. Implement efficient patterns.
Create comprehensive test suites. Handle integration testing. Support unit testing. Implement test strategies.
created runs after instance is created, reactive data is set up. Can access reactive data and events. Cannot access DOM/this.$el. Good for initial data fetching. Composition API equivalent: onCreated.
updated runs after data changes and DOM updates. Can access updated DOM. Should avoid changing state to prevent infinite loops. Composition API: onUpdated.
unmounted executes when component is removed from DOM. Used for cleanup (removing event listeners, canceling timers). All directives unbound, watchers stopped. Composition API: onUnmounted.
Use async/await or promises. Handle loading states. Support error handling. Implement cleanup for async operations. Consider component lifecycle.
activated and deactivated hooks for cached components. Handle component activation. Support cache lifecycle. Implement caching strategies.
