Scaling UpLesson 34Free preview

Vue Lifecycle Hooks

This lesson is part of Vue · All levels

Summary

Every component of the Vue goes through a lifecycle, from being made, rendered, installed in the DOM, to disassembled. A lifecycle hook is a point where you can run code at those moments, like loading data when the component is ready or cleaning the timer when the component is removed. Vue 3 provides hooks in the form of onMounted, onUpdated, etc. on the Composition API.

Key points

The life cycle of the component includes manufacturing, rendering, installation, updating, and demolition.
OnMounted is run after the component is installed into the DOM.
Unmounted run when the component is disassembled, suitable for cleaning the resource.
OnUpdated runs every time reactive data triggers a rendering.
The hook in the Composition API is written directly into the script setup.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.