Common Ways of Component Communication

Parent-Child Components: props and emit

Sibling Components: Event Bus

Event bus, i.e., the concept of message subscription and publishing mode

Cross-Level Components: provide and inject

Refer to example

State Container

Global State Management: Vuex, Pinia

For more introduction to Pinia, refer to here

Lifecycle Hooks of Options API

beforeCreate Before the instance is created, data and events have not been initialized yet, and data and props cannot be accessed at this stage.

created The component instance has been created, and data and events have been set.

beforeMount The component is about to be mounted to the DOM, but rendering has not been completed yet. At this time, the template has been parsed.

mounted The component has been mounted, and the DOM has been generated. At this time, operations interacting with the DOM can be performed.

beforeUpdate The component's data has changed, but the view has not been updated yet.

updated The component's data has changed, and the view has been updated.

activated The component is activated (e.g., components wrapped with keep-alive). This hook only applies to components cached by keep-alive.

deactivated The component is deactivated (components cached in keep-alive will trigger this hook). Used to clean up cached components.

beforeUnmount The component instance is about to be destroyed, but the DOM has not been removed yet.

unmounted The component instance has been destroyed, and the DOM has been removed. Used to perform cleanup operations.

errorCaptured Capture and handle errors from child components. This hook is triggered when an error occurs in a child component, allowing you to capture and handle the error to prevent it from propagating to the parent component.

Lifecycle Hooks of Composition API

• Use lifecycle hooks in the setup function, and these hooks are called with the on prefix. The hook functions are basically the same as those in the Options API.
• The created and beforeCreate hooks no longer exist in the Composition API of Vue 3. The corresponding logic can be handled in the setup function.