All language subtitles for 006 Lifecycle Functions_en

In this lecture, we're going to learn how to use the life cycle functions in the composition API,

the process of using a lifecycle function is not much different than what we've been doing so far.

We import a function and then we can call it.

We can use most of the lifecycle functions in the composition API, regardless of what lifecycle function

you decide to use.

All of them start with the word on.

Here are some examples of some of the lifecycle functions available to functions have been renamed the

before destroy.

Hooke has been renamed to before unmount and the destroyed hook has been renamed to Unmounted.

The name changes have been made to more accurately describe what happens to a component when it's removed

from the document.

There are additional lifecycle functions such as the activated and deactivated hooks.

These are called.

If you're wrapping your components with these keep alive component.

It's not common to use these, but they are available.

One last thing worth noting.

The composition API doesn't support the before created and created lifecycle functions.

This is because the set function runs after the before created hook, but before the created hook.

Rather than supporting both hooks, Vue recommends you write your code inside the setup function that

would generally be in these hooks.

Let's use some of the lifecycle functions and the composition API will be working on the app component

file for this example, at the top of the script, Block will import two functions called on before

Mount's and Unmounted from The View package.

We must import the functions if you want to hook into them from the component as a reminder, every

life cycle hook is prefixed with the word on.

We'll use both functions in the setup function, add them at the very top.

We can run code during the life cycle by passing in a callback function, lets pass both hooks and arrow

function.

We won't do anything crazy in the life cycle hooks for demonstration purposes.

We'll take a message to let us know which function gets called.

Let's run the application in the browser.

Open the console and the developer tools will see both messages logged in the console, this result

proves we were able to use the life cycle functions successfully.

Life cycle functions are very easy to use in the composition API.

You need to import them, call them in.

They set up a function and provide a callback function.

The callback function is called during the lifecycle.

There's not much else to it.