Vue js lifecycle<\/b><\/h2>\n
lifecycle hooks are methods that give you the opportunity to add code at specific stages.<\/span><\/p>\n There are eight lifecycles in Vue js<\/strong><\/p>\n <\/p>\n This is the primary lifecycle hook in vue, it’s referred to as once the Vue instance has been initialized. during this stage, events haven’t been established yet:<\/span><\/p>\n <\/p>\n This is the second lifecycle hook that runs after beforeCreate() hooks. at this stage, Vue instance has been initialized and activated at the beginning of things like computed properties, watchers, events.<\/span><\/p>\n <\/p>\n beforeMount Method invoked right before the initial render happens<\/span>. at this stage template or render functions have been compiled:<\/span><\/p>\n <\/p>\n In the mounted hook, you’ll have full access to the reactive part and the el(the DOM) has been replaced.\u00a0\u00a0<\/span><\/p>\n <\/p>\n This method is called when data property updates and before the DOM has been re-rendered.<\/span><\/p>\n <\/p>\n This method called when data property changed in your component and DOM re-rendered<\/span><\/p>\n <\/p>\n beforeDestroy() Method is fired right before the Vue instance is destroyed.<\/span><\/p>\n <\/p>\n This method is called when a Vue instance has been destroyed.<\/span><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" What is Vue js Vue js is a front-end JavaScript framework for building the user interface and single-page applications Vue js lifecycle lifecycle hooks are methods that give you the opportunity to add code at specific stages. There are eight lifecycles in Vue js beforeCreate created beforeMount mounted beforeUpdate Updated BeforeDestroy Destroyed beforeCreate() This […]<\/p>\n","protected":false},"author":1,"featured_media":6740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[604],"tags":[603,601,602],"class_list":["post-6731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue-js","tag-complete-guide-to-vue-lifecycle","tag-vue-js-lifecycle-hooks","tag-vue-js-series"],"yoast_head":"\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image1-1.png\")
<\/p>\n\n
beforeCrea<\/b>te()<\/strong><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0data() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0count: 0\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0beforeCreate() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('I am the first lifecychook to get called!');\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`You can see that my data property is ${typeof this.count}`); \/\/ undefined\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
created<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0data() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0counter: 0\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n\r\n\u00a0\u00a0created() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('I am the created hook.');\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`You can now see that my data property is ${typeof this.counter}`);\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
beforeMount<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0beforeMount() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('I am ready to be rendered.!')\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
mounted()<\/b><\/h3>\n<\/li>\n<\/ol>\n
<template>\r\n\r\n\u00a0\u00a0<div ref=\"mounted-element\">component.<\/div>\r\n\r\n<\/template>\r\n\r\n\r\n<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0mounted() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`At this point, vm.$el has been created and el has been replaced.`);\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
beforeUpdate<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0data() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0count: 0\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n\r\n\u00a0\u00a0beforeUpdate() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(this.count) \/\/ Logs the counter value every second, before the DOM updates.\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0created() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0setInterval(() => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.count++\r\n\r\n\u00a0\u00a0\u00a0\u00a0}, 1000)\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
updated<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<template>\r\n\r\n\u00a0\u00a0<div ref=\"counter-element\">{{counter}}<\/div>\r\n\r\n<\/template>\r\n\r\n<script>\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0data() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0count: 0\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0created() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0setInterval(() => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.count++\r\n\r\n\u00a0\u00a0\u00a0\u00a0}, 1000)\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0updated() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`At this point, Virtual DOM has re-rendered and patched.`)\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(+this.$refs['counter-element'].textContent === this.count)\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
beforeDestroy<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\nexport default {\r\n\r\n\r\n\u00a0\u00a0beforeDestroy() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n\n
destroyed<\/b>()<\/span><\/h3>\n<\/li>\n<\/ol>\n
<script>\r\n\r\n\r\nexport default {\r\n\r\n\u00a0\u00a0destroyed() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(`At this point, watchers, child components, and event listeners have been destroyed.`)\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(this)\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n