DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • How To Make a Windows Keylogger By Yourself
  • Generic and Dynamic API: MuleSoft
  • Microservices With .NET Core: Building Scalable and Resilient Applications
  • Self-Hosted Gateway Design Patterns Discussion

Trending

  • Unlocking the Benefits of a Private API in AWS API Gateway
  • Breaking Bottlenecks: Applying the Theory of Constraints to Software Development
  • Testing SingleStore's MCP Server
  • Integrating Security as Code: A Necessity for DevSecOps
  1. DZone
  2. Software Design and Architecture
  3. Integration
  4. A Guide to Understanding Vue Lifecycle Hooks

A Guide to Understanding Vue Lifecycle Hooks

Vue has a lot of lifecycle hooks, and what can be confusing is what each one means or does. We'll be covering what each lifecycle hook does, and how to use them.

By 
Johnny Simpson user avatar
Johnny Simpson
DZone Core CORE ·
May. 09, 22 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
6.5K Views

Join the DZone community and get the full member experience.

Join For Free

Like other frameworks, Vue has a number of lifecycle hooks that allow us to attach code to specific events that occur while a Vue application is being created or used - for example, when the component loads, when a component is added to the DOM, or when something is deleted.

Vue has a lot of lifecycle hooks, and what can be confusing is what each one means or does. In this guide, we'll be covering what each lifecycle hook does and how to use them.

Prerequisites

If you are unfamiliar with Vue, you might want to check out my guide on creating your first Vue applications before doing this one. Alternatively, you can read my guide on creating a to-do list in Vue if you are slightly more familiar.

Lifecycle Hooks in Vue

The critical thing to note here is that Vue has two paradigms for lifecycle hooks. One uses the Compositions API, something introduced in Vue 3, and the other is the "Options API," which is the prototypical pattern of defining Vue components. This guide will start with the Options API and then build off that to show how things work in the compositions API.

Example of Options API

If you are unfamiliar with the Options API, it is the version of Vue that looks like the code below:

export default {
    name: 'Component Name',
    data() {
        return {
            phoneNumber: '123-123-123'
        }
    },
    mounted() {

    }
}


Lifecycle Hooks Diagram

To understand when each lifecycle hook fires, let's look at a diagram. Below, an image depicts when each lifecycle hooks fires.

Vue Lifecycle Hooks

Running a Lifecycle Hook

To run any lifecycle hook with the Options API, you can add it to your Javascript prototype. For example, if you want to use beforeCreate(), the first hook fired after a new component is detected, you could add it like this:

 
export default {
    name: 'Component Name',
    data() {
        return {
            someData: '123-123-123'
        }
    },
    mounted() {
        // Any code you want to fire immediately before the Options API loads up
    }
}


Now that we've covered the different hooks let's look at what they do and when they happen.

beforeCreate()

Called at the point the component is initialized. data() and computed properties are not available at this point. It is useful for calling APIs that do not adjust the component's data. If you update data() here, it will be lost once the Options API loads up.

created()

Called after the instance has finished processing all state operations. You have access to reactive data, computed properties, methods, and watchers. $el, which is where Vue stores the component HTML, is not available yet, since the DOM element is not created. If you want to fire something like an API, or update, you can do it here.

beforeMount()

This hook runs immediately before rendering occurs. The template has been compiled and stored in memory, but it has not been attached to the page yet. Therefore, none of the DOM elements have been created yet. $el is still unavailable at this stage.

This is not called when doing a server-side rendering of a site.

mounted()

The component is mounted and shown on the page. $el is now available, so you can now access and manipulate the DOM from Vue. This will only fire after all child components are fully mounted. It's useful to use this when you want to do something to the DOM after it has loaded, like perhaps changing a particular element within it.

This is not called when doing a server-side rendering of a site.

beforeUpdate()

Sometimes, you will change data in your Vue component by updating it in a watcher or by user interaction. When you change data() or cause a re-render in your component, an update event will fire. Immediately before the re-render occurs, beforeUpdate() will fire. After this event, the component will be re-rendered and updated with the latest data. You can use this hook to access the current state of the DOM and even update data() it.

This is not called when doing a server-side rendering of a site.

updated()

After an update is fired and the DOM updated to match the latest data, updated() will fire. This happens immediately after the re-render. Now, if you access $el, or anything else about the DOM content, it will show the new, re-rendered version. If you have a parent component, the child component updated() is called first, followed by the parent updated() hook.

This is not called when doing a server-side rendering of a site.

beforeUnmount()

If a component is removed, then it becomes unmounted. Before the component is completely removed, beforeUnmount() fire. This event still has access to the DOM elements and anything else to do with the component. This is useful in deletion events; for example, you can use this event to notify a server that a user has deleted a Node in a table, for instance. You still have access to, as well as data, watchers, and methods if you need to use them.

This is not called when doing a server-side rendering of a site.

unmount()

Once completely removed, the unmount() event fires. This can be used to clean up other data or event listeners or timers to let them know that this component no longer exists on the page. You still have access to, as well as data, watchers, and methods if you need to use them.

This is not called when doing a server-side rendering of a site.

Using Vue Lifecycle Hooks With the Composition API

If you are used to using the Options API, the above hooks will make a lot of sense. If you've mainly used Vue 3, you may be more used to using the Composition API. The Composition API is complementary to the Options API, but we use hooks slightly differently. Let's take a look at how it works.

created() And beforeCreated() Are Replaced With setup()

In the compositions, API, created() and beforeCreated() are not accessible. Instead, they are replaced with setup(). This makes sense since there is no 'Options API' to load. Any code you would have put in created() or beforeCreated(), can now safely go in setup()

Hooks Can Be Used Alongside setup()

Hooks can still be used alongside setup, in the same way they are in the Options API, which is pretty intuitive. For example:

 
export default {
    data() {
        return {
            msg: 1
        }
    },
    setup() {
        console.log('Component setup complete')
    },
    mounted() {
        console.log(this.$el)
    },
}


However, another way you may see this done is by defining the hooks within the setup() the function itself, using composition API functions. If we do things this way, the hooks are named slightly differently:

  • beforeMount() becomes onBeforeMount()
  • mounted() becomes onMounted()
  • beforeUpdate() becomes onBeforeUpdate()
  • updated() becomes onUpdated()
  • beforeUnmount() becomes onBeforeUnmount()
  • unmounted() becomes onUnmounted()

These functions do the same thing I described in the previous section, but they are called slightly differently. All of these hooks must be called within either the setup() function or in a setup script. For example, you must either run your hooks within a setup function like this:

 
export default {
    setup() {
        // All hooks must go here
    }
}


Or alternatively, within a script tag with the setup attribute like so:

 
<script setup>
// All hooks must go within this setup script
</script>


As such, if you want to call hooks using this methodology, your code will look like this instead:

 
export default {
    setup() {
        // All hooks must go here
        onBeforeMount(() => {
            // Code for beforeMount()
        });
        onBeforeUpdate(() => {
            // Code for beforeUpdate()
        })
    }
}


There is no fundamental performance improvement or reason why this is better. It is just another way of doing it - and in some cases, it'll make your code easier to read and maintain. For other instances, you might be better off using the Options API, so use whichever you feel more comfortable with.

Conclusion

The Vue Lifecycle is quite complicated, but it gives us many tools to run code, update data, and make sure our components display the way we want them to. In this guide, we've covered how it works, when to use each part of the lifecycle, and how the Compositions API works a little differently from the Options API regarding lifecycle hooks.

API Hook Data (computing) Event

Published at DZone with permission of Johnny Simpson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • How To Make a Windows Keylogger By Yourself
  • Generic and Dynamic API: MuleSoft
  • Microservices With .NET Core: Building Scalable and Resilient Applications
  • Self-Hosted Gateway Design Patterns Discussion

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!