MOCKSTACKS
EN
Questions And Answers

More Tutorials









VueJs Lifecycle Hooks

Examples

Hooks for Vue 1.x


•init
Called synchronously after the instance has been initialized and prior to any initial data observation.

•created
Called synchronously after the instance is created. This occurs prior to $el setup, but after data observation, computed properties, watch/event callbacks, and methods have been setup.

•beforeCompile
Immediately prior to compilation of the Vue instance.

•compiled
Immediately after compilation has completed. All directives are linked but still prior to $el
being available.

•ready
Occurs after compilation and $el are complete and the instance is injected into the DOM for
the first time.

•attached
Occurs when $el is attached to the DOM by a directive or instance calls $appendTo().

•detached
Called when $el is removed/detached from the DOM or instance method.

•beforeDestroy
Immediately before the Vue instance is destroyed, but is still fully functional.

•destroyed
Called after an instance is destroyed. All bindings and directives have already been unbound and child instances have also been destroyed.

Using in an Instance


Since all lifecycle hooks in Vue.js are just functions, you can place any of them directly in the instance declaraction.
//JS
new Vue({
 el: '#example',
 data: {
 ...
 },
 methods: {
 ...
 },
 //LIFECYCLE HOOK HANDLING
 created: function() {
 ...
 },
 ready: function() {
 ...
 }
});

Common Pitfalls: Accessing DOM from the `ready()` hook


A common usecase for the ready() hook is to access the DOM, e.g. to initiate a Javascript plugin, get the dimensions of an element etc.

The problem


Due to Vue's asynchronous DOM update mechanism, it's not guaranteed that the DOM has been fully updated when the ready() hook is called. This usually results in an error because the element is undefined.

The Solution


For this situation, the $nextTick() instance method can help. This method defers the execution of the provided callback function until after the next tick, which means that it is fired when all DOM updates are guaranteed to be finished.

Example:


module.exports {
 ready: function () {
 $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
 this.$nextTick(function() {
 $('.cool-input').initiateCoolPlugin() // this will work because it will be executed
after the DOM update.
 })
 }
}


Conclusion

In this page (written and validated by ) you learned about VueJs Lifecycle Hooks . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs List Rendering.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.