lifecycle

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Lifecycle hooks overview

Each Vue component instance goes through a series of initialization steps when created, including setting up data observation, compiling the template, mounting the instance to the DOM, and updating the DOM when data changes. Along the way, Vue runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

onMounted hook in Composition API

The onMounted hook runs code after the component has finished the initial rendering and created the DOM nodes. In the Composition API, import onMounted from 'vue' and call it within setup with a callback function.

mounted hook in Options API

In the Options API, the mounted hook is defined as a method in the component options object. It runs code after the component has finished the initial rendering and created the DOM nodes. The 'this' context points to the component instance.

Most commonly used lifecycle hooks

The most commonly used lifecycle hooks in Composition API are onMounted, onUpdated, and onUnmounted. In the Options API, they are mounted, updated, and unmounted.

Avoid arrow functions with lifecycle hooks in Options API

In the Options API, you should avoid using arrow functions when declaring lifecycle hooks, as you won't be able to access the component instance via 'this' if you do so. The lifecycle hooks are called with their 'this' context pointing to the current active instance invoking it.

Lifecycle hooks must be registered synchronously in Composition API

When calling lifecycle hooks like onMounted in the Composition API, they must be registered synchronously during component setup. Vue automatically associates the registered callback function with the current active component instance. This means you should not call lifecycle hooks inside setTimeout or other asynchronous operations. However, the hook can be called in an external function as long as the call stack is synchronous and originates from within setup().

onMounted example in Composition API

Example of using onMounted in Composition API: ```vue <script setup> import { onMounted } from 'vue' onMounted(() => { console.log(`the component is now mounted.`) }) </script> ```

mounted example in Options API

Example of using mounted in Options API: ```js export default { mounted() { console.log(`the component is now mounted.`) } } ```

Lifecycle hook registration pitfall in Composition API

Do not call onMounted inside setTimeout or other asynchronous operations. Lifecycle hooks must be registered synchronously during component setup. This will not work: setTimeout(() => { onMounted(() => { // this won't work. }) }, 100)

onRenderTracked and onRenderTriggered lifecycle hooks

onRenderTracked and onRenderTriggered are lifecycle hooks that receive a debugger event when dependencies are tracked or when a component is triggered to re-render. They work in development mode only. The debugger event contains information about the dependency being tracked or triggered.

Give your agent this brain