Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

VueJS part 7: Lifecycle methods

Posted on Oct 10 • Originally published at kristijan-pajtasev.Medium Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. Every application and component has its Lifecycle, and quite often it happens that we need to do something during some specific stage. That is why there are lifecycle methods. Functions that are executed in the specific stages of the application. In this post, I am covering which lifecycle stages of Vue are, and which methods you can use to access them.This method runs before anything starts in VueJS. Think of it as some action before there is an initialization object.createdAt this moment, there is an initialization object, but the template is still not compiled.This stage is when your template is compiled but it is still not shown in your browser.At this stage, the template has been compiled and shown in your browser. The moment that happens, this method gets triggered. This might be a place you might trigger if you need to access some HTML element from your component.With the change of data, components do get changed. And if you want to take some action on it but before it gets re-rendered, this is a place to do it.Very similar to the beforeUpdate method, the difference is that this method runs when component data is updated and gets re-rendered.Sometimes, components will get removed from your DOM. But you might want to do some cleanup tasks before such thing happens like clearing times. When the removing process starts, but before the component gets removed, this is the method that gets triggered.Finally, the last step of the lifecycle is the unmount method. It runs once the component is completely removed from the DOM.The code used in this article can be found in my GitHub repository.For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Cybermaxi7 - Sep 24 Aniket - Sep 25 chintanonweb - Sep 28 Dhruv Joshi - Oct 7 Once suspended, hi_iam_chris will not be able to comment or publish posts until their suspension is removed. Once unsuspended, hi_iam_chris will be able to comment and publish posts again. Once unpublished, all posts by hi_iam_chris will become hidden and only accessible to themselves. If hi_iam_chris is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kristijan Pajtasev. They can still re-publish the post if they are not suspended. Thanks for keeping Dev Community safe. Here is what you can do to flag hi_iam_chris: hi_iam_chris consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging hi_iam_chris will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.



This post first appeared on VedVyas Articles, please read the originial post: here

Share the post

VueJS part 7: Lifecycle methods

×

Subscribe to Vedvyas Articles

Get updates delivered right to your inbox!

Thank you for your subscription

×