Lifecycle Hooks
  • Lifecycle Hooks

    Learn about Lifecycle Hooks in Vue 3 Composition API.

    10 Questions
  • 1

    DOM Updates

    In Vue 3, which lifecycle hook is triggered before the component's DOM is updated with reactive data?

  • 2

    Setup

    What is the purpose of the setup function in Vue 3?

  • 3

    DOM Access

    lifecycle hook in Vue 3 is used to access and modify the DOM after the component is mounted?
  • 4

    Cleanup tasks

    In Vue 3, which lifecycle hook is used to perform cleanup tasks before a component is unmounted and destroyed?

  • Capturing errors with hooks

    Vue 3 introduces a new hook called onErrorCaptured which helps capturing errors in a child component.

    These errors can originate from event handlers, setup() function, watchers or any lifecycle hooks of the child components.

    Along with error, onErrorCaptured hook also provides a (child) component instance in a second argument where the error has originated from.

  • 6

    Capturing errors with hooks

    In Vue 3, which lifecycle hook is triggered when an error has occurred in a child component during rendering?

  • 7

    beforeDestroy

    What is the replacement for the beforeDestroy (of Vue 2) lifecycle hook in Vue 3?

  • 8

    DOM Updates

    Which lifecycle hook in Vue 3 is called when a component is updated and the virtual DOM has been re-rendered because of the reactive data changes?

  • 9

    SSR

    Which lifecycle hook in Vue 3 is SSR only, and used for fetching data on server-side?

  • 10

    Dev only lifecycle hooks

    Which of the two lifecycle hooks are dev only in Vue 3?

  • Lifecycle on cached instance

    <component :is=””/> is used to render Vue component dynamically. When <component> is wrapped around with <KeepAlive>, KeepAlive caches the inactive <component> by keeping it alive, without un-mounting it.

    In other words, dynamic component goes into deactivated state on unmount, and active state when mounted.

    We can access these two states of the dynamic component using onActivated and onDeactivated lifecycle hooks. Remember, both hooks work for component cached by <KeepAlive>.

  • 12

    DOM Caching

    Which of the two lifecycle hooks in Vue 3 are associated with DOM tree cached by <KeepAlive> component?