Vue Js Lifecycle

Posted on  by admin

Lifecycle Hooks are special methods, or peepholes to give us ideas on how things work behind-the-scenes of a library (React) or framework (Vue).

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

These methods allow you to know when a component is created, added to the DOM, updated, or destroyed in the Vue instance. Note : All lifecycle hooks automatically have their this context bound to the instance, so that you can access data, computed properties, and methods.

beforeCreateThe beforeCreate hook runs whenever a component is initialized. None of the data, or methods are setup during this.

Conclusion

createdDuring the created hook, we can access all reactive data members and methods as part of our component. The DOM is yet to be mounted. beforeMountThe beforeMount hook runs before the initial render of the components and after the template or render functions have been compiled.

In the mounted hook, we have access to the reactive components, and rendered DOM (via this.$el). The beforeUpdate hook runs after data changes on your component, right before the DOM is patched and re-rendered.

The updated hook runs after data changes on your component and the DOM re-renders. The beforeDestroy is invoked right before teardown or destroyed. The component completely exists and is totally functional. The destroyed hook is when everything part of the component has been torn down, or destroyed from existence. This method is useful for all cleanup required within the component.

The Destroying Hooks

For more to learn about VueJS, click here. For further actions, you may consider blocking this person and/or reporting abuse. Lifecycle hooks are a window into how the library you are using works behind the scenes.

  1. Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed. This article will introduce you to the creation, mounting, updating, and destruction hooks in Vue.js.
  2. To follow through this tutorial, you’ll need:. Familiarity with Vue.js. Read the How To Develop Websites with Vue.js series to learn more. Creation hooks are the first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM.

Unlike any of the other hooks, creation hooks are also run during server-side rendering. Use creation hooks if you need to set things up in your component, both during client rendering and server rendering. You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooks.

The beforeCreate hook runs at the initialization of your component - data has not been made reactive, and events have not been set up yet:. In this example, when the beforeCreate hook is run, this snippet will log the message:. The created hook runs before the templates and Virtual DOM have been mounted or rendered - you are able to access reactive data and events that are active:.

In this example, the snippet will store property as Example property. When the created hook is run, it will log a message:. And then property is changed to Example property updated. Later in the lifecycle,{{ propertyComputed }} will appear as Example property updated instead of Example property. In this step, you reviewed some examples of creation hooks and are ready to move to the next part of the lifecycle, mounting hooks.

Mounting hooks are often the most used hooks. They allow you to access your component immediately before and after the first render. They do not, however, run during server-side rendering. Use mounting hooks if you need to access or modify the DOM of your component immediately before or after the initial render.

The Creation Hooks

Do not use mounting hooks if you need to fetch some data for your component on initialization. Note: Use created (or created and activated for keep-alive components) for this instead. Especially if you need that data during server-side rendering.

The beforeMount hook runs right before the initial render happens and after the template or render functions have been compiled:. In this example, when the beforeMount hook is run, this snippet will log the message:. In the mounted hook, you will have full access to the reactive component, templates, and rendered DOM (via this.$el). Use mounted for modifying the DOM—particularly when integrating non-Vue libraries:.

Other Hooks

In this example, when the mounted hook is run, this snippet will log the message:. In addition, a message of Example content. (this.$el.textContent) will be logged. In this section, you explored use-cases for mounting hooks. In the next step, you review some examples that use updating hooks. Updating hooks are called whenever a reactive property used by your component changes or something else causes it to re-render. They allow you to hook into the watch-compute-render cycle for your component.

Use updating hooks if you need to know when your component re-renders, perhaps for debugging or profiling. Do not use updating hooks if you need to know when a reactive property on your component changes.

Use computed properties or watchers for that instead. The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.

Understanding Updating Hooks (Diff and Re-render)