This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
In this guide, we will be looking at Vue created lifecycle hook. In general, life cycle hooks are windows to the driving factors of our frameworks.
In a nutshell, they help us keep track of what happens to our components. This would usually be when they are created, updated, destroyed or before either of the listed happens.
Created lifecycle hook is a function called synchronously after the instance is created. At this point, our methods, computed properties, watch/event callbacks have all been setup.
Say we have a method or function that we need to call when the component is created, this lifecycle hook does come in handy.
<script>
export default {
data() {
return {
message: "Shows a demo message",
}
},
created() {
this.displayMessage();
},
methods: {
displayMessage() {
console.log(this.message);
},
},
};
</script>Basically, the method displayMessage is called when the component is created. As mentioned earlier, we have access to the data instance at this point; hence why we can make reference to the message variable in the data instance.
The post Using the Vue created lifecycle hook appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-02-17T16:09:26+00:00) Using the Vue created lifecycle hook. Retrieved from https://www.scien.cx/2021/02/17/using-the-vue-created-lifecycle-hook/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.