{"id":6340,"date":"2018-08-20T10:27:37","date_gmt":"2018-08-20T10:27:37","guid":{"rendered":"https:\/\/9series-blog.staging9.com\/?p=6340"},"modified":"2026-03-03T10:47:39","modified_gmt":"2026-03-03T10:47:39","slug":"4-main-categories-vuejs-lifecycle","status":"publish","type":"post","link":"https:\/\/www.9series.com\/blog\/4-main-categories-vuejs-lifecycle\/","title":{"rendered":"4 Main Categories of Vuejs Lifecycle"},"content":{"rendered":"

\"4<\/a><\/p>\n

Definition<\/strong>
\nVuejs is an open source JavaScript framework used to build user-interfaces. It can also <\/span>function as a web app framework that is capable of handling advanced single-page apps.<\/span><\/p>\n

VUEJS Lifecycle<\/strong>
\nIf you want to go deep in Vue, firstly you should be familiar with the component lifecycle.<\/p>\n

Life-cycle methods serve as an imagination as to how our built components work behind the scenes. They provide you with methods that enable you to trigger different actions at a different interface of a component\u2019s life-cycle. You can use the component\u2019s state and methods through an auto-bind property of life-cycle methods to your component.<\/p>\n

\"4<\/a><\/p>\n

Categories of VUEJS Lifecycle<\/strong>
\nBelow are different four categories of lifecycle :
\n1. Creation (Initialization)
\n2. Mounting (DOM Insertion)
\n3. Updating (Diff & Re-render)
\n4. Destruction (Teardown)<\/p>\n

Creation<\/strong>
\nThis method allows you to perform actions before your component has even been added to the DOM. Unlike methods Use creation hooks if you need to set things up in your component both during client rendering and server rendering.<\/p>\n

Creation methods are implemented using beforeCreate()<\/strong><\/em> and created()<\/strong><\/em> hooks. <\/strong>You can\u2019t able to access to the DOM or the target mounting element (this.$el) inside of creation hooks.<\/p>\n

beforeCreate()\u00a0: <\/strong><\/em>The beforeCreate()<\/strong><\/em> hook runs at first when a component is still in the non-reactive mode and events that happen during the component\u2019s lifecycle have yet not been set up. You can see in the examples below where x is undefined.<\/p>\n

\"2(1)\"<\/a><\/p>\n

created()\u00a0:\u00a0The created() <\/strong><\/em>hook takes place when Vue has set up events and data observation. Here, templates have not yet been mounted or rendered but events are active and access to reactive data is enabled. Look at the code block below:<\/p>\n

\"3\"<\/a><\/p>\n

Mounting(DOM Insertion)<\/strong>
\nThis method is widely used when working with components. It allows you to access your component immediately before and after it is rendered the first time. It is used when you want to modify the DOM of your component immediately before or after the initial render.<\/p>\n

During server-side rendering, this method shouldn\u2019t be used for fetching data for components on initialization. For that purpose, you can use created()<\/strong><\/em> methods<\/p>\n

beforeMount()\u00a0:<\/strong><\/em> This method is cited only after the template has been compiled and virtual DOM is updated by Vue. After this, the $el(element)<\/em><\/strong> property is added to the Vue instance, the native DOM is updated and the mounted()<\/strong><\/em> method is cited.<\/strong><\/p>\n

\"4\"<\/a><\/p>\n

mounted()\u00a0<\/strong><\/em>:<\/strong> The mounted()<\/strong><\/em> method you will have full access to the reactive component, templates, and rendered DOM. Mounted is the most generally used lifecycle hook. It is usually used for collecting the data for your component and then altering the DOM to amalgamate other libraries and frameworks asides Vue.\u00a0 Let\u2019s see the code block below:<\/p>\n

\"5\"<\/a><\/p>\n

Using the mounted()<\/strong><\/em> method to fetch this data from the DOM:<\/p>\n

\"6\"<\/a><\/p>\n

Updating<\/strong>
\nUpdating methods are very useful for debugging purpose. This method is called whenever a reactive property used by your component changes or re-render occurs. The component\u2019s DOM will be updated when this hook is called allowing you to use the updated methods to execute operations dependant on the DOM.<\/p>\n

Note:<\/em>\u00a0Don\u2019t use updating methods to change state, for that you can use\u00a0computed properties<\/a>\u00a0or\u00a0watchers<\/a>.\u00a0<\/em><\/p>\n

beforeUpdate()\u00a0:<\/strong><\/em> This method is executed after the data changes on your component and the updated cycle starts exactly before the DOM is patched and re-rendered. It lets you obtain the new state of any kind of reactive data on your component prior to being rendered. Let\u2019s look at the code block below:<\/p>\n

\"before\"<\/a><\/p>\n

updated()\u00a0:<\/strong><\/em> The updated() <\/em><\/strong>method runs immediately after the data changes on your component and the re-rendering of DOM takes place. Let\u2019s have a look at the code block below:<\/p>\n

Interacting with our Vue instance:
\n\"updated\"<\/a><\/p>\n

Destruction<\/strong>
\nLast and final stage of a component\u2019s life-cycle is Destruction method. In this it allows you to execute actions such as cleanup when your components have been destroyed and are performed when your components have been torn down and removed from the DOM.<\/p>\n

beforeDestroy()\u00a0:<\/strong>\u00a0This method is performed before the components are destroyed. Here your components are still completely present and perfectly functional. If you want to cleanup events, beforeDestroy()<\/strong> is the best time to do that. Let\u2019s take a look at the code block below:<\/p>\n

\"9\"<\/a><\/p>\n

destroyed()<\/em> :<\/strong> This method is called only after your component has been destroyed, its directives have been unbound and its event listeners have been removed successfully. The destroyed()<\/strong><\/em> method allows you to do last minute cleanup or inform the remote server about the component being destroyed. Let\u2019s take a look at the code block below:<\/p>\n

\"10\"<\/a><\/p>\n

Closing Note
\n<\/strong>Through this <\/span>vuejs development services<\/a> life-cycle, you should be able to visualize the journey of a Vue instance and get an idea about which method gets initialized at which phase of coding as well as it’s easy to customize your own whenever the need arises with help of various hooks or methods. For more details, you can go through the Vue\u2019s documentation for the other methods and properties that can be used alongside with the life-cycle methods when you are creating your components.<\/span><\/p>\n

More to learn here:<\/strong>
\nhttps:\/\/alligator.io\/vuejs\/
\nhttps:\/\/github.com\/vuejs\/vue<\/p>\n

Source:<\/strong>
\nhttps:\/\/scotch.io\/tutorials\/demystifying-vue-lifecycle-methods#toc-creation
\nhttps:\/\/scotch.io\/tutorials\/demystifying-vue-lifecycle-methods#toc-mounting
\nhttps:\/\/scotch.io\/tutorials\/demystifying-vue-lifecycle-methods#toc-updating
\nhttps:\/\/vuejs.org\/v2\/guide\/
\ncodeingexplained.com<\/p>\n","protected":false},"excerpt":{"rendered":"

Definition Vuejs is an open source JavaScript framework used to build user-interfaces. It can also function as a web app framework that is capable of handling advanced single-page apps. VUEJS…<\/p>\n","protected":false},"author":1,"featured_media":6341,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[1465,1466],"tags":[2263,2217],"class_list":["post-6340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source-javascript-framework","category-vuejs","tag-open-source-javascript-framework","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/comments?post=6340"}],"version-history":[{"count":1,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6340\/revisions"}],"predecessor-version":[{"id":6352,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6340\/revisions\/6352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media\/6341"}],"wp:attachment":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media?parent=6340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/categories?post=6340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/tags?post=6340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}