Preface:
Hello everyone, this time I have asked to learn about Vue to participate in the project. By the way, I wrote this article to share through some of the knowledge I learned about Vue. Specifically here about Vue – LifeCycle (life cycle) of an instance in Vue. Let’s get started !!
1. Lifecycle:
When approaching any framework, we all need to understand their Lifecycle , from application creation, application run or application termination. In Vue too, here is a diagram of the life cycle of an instance in Vue
The diagram above is the life cycle of an instance. As we can see, the Lifecycle of an instance is included
- Initialize a Vue object
- Bind to the DOM
- Update DOM when data changes
- Instance cancel.
2. Lifecycle Hooks
With the life cycle stages of a VueJS instance above, we will go into learning about the Lifecycle Hooks corresponding to each stage. So what are Lifecycle Hooks :
- Lifecycle Hooks are methods that are executed at every stage of the Vue life cycle.
- With the four phases mentioned above, the hooks: beforeCreate , created , beforeMount , mounted , beforeUpdate , updated , and beforeDestroy , destroyed respectively are used .
We will go into details of each hook in turn.
Initialization phase:
- the beforeCreate hook runs every time an instance is instantiated. At this point, data, event has not been set.
- created hook is run when the data, event has been successfully set.
The code below will describe these two function hooks
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | new Vue({ el: "#app", data: { content: "Lifecycle Hooks", }, beforeCreate () { console.log('before create') console.log(this.content) // khi này this.content trả về undefined vì data chưa được nhận (observe). }, created () { console.log('created') console.log(this.content) // khi này this.content trả về "Lifecycle Hooks" vì quá trình observe data, thiết lập event đã hoàn thành. } }) |
DOM consolidation stage:
- The beforeMount hook will run after the data, the event has been established and before it is mounted to the DOM. In this hook we still haven’t – access to the element in the DOM.
- mounted hook: This stage, mounted hook will allow us to have access to the element in the DOM. That is, DOM is mounted.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | new Vue({ el: "#app", data: { content: "Lifecycle Hooks", }, beforeMount () { console.log('before mount') console.log(this.$el.textContent) // lỗi vì chưa gắn kết DOM vì vậy chưa thể truy cập đến các thành phần trong DOM ở console.log sẽ hiển thị ra }, mounted () { console.log('mounted') console.log(this.$el.textContent) // khi này this.$el đã gắn kết với DOM, lúc này có thể truy cập được tới các thành phần trong DOM } }) |
DOM update phase when data changes:
- beforeUpdate hook: After the object has been attached to the DOM, when the data is changed, and before rendering, patching and displaying to the user.
1 2 3 4 5 6 7 8 9 10 | var vm = new Vue({ el: "#app", data: { update: "" }, beforeUpdate() { alert(this.update) }, }) |
- updated hook: Runs right after beforeUpdate. Use when you need to access the DOM after a property change. data in beforeUpdate and updated are the same
Instance cancel phase:
- beforeDestroy hook: The stage before the instance is destroyed. This is the place to manage resources, delete resources, clean up components.
1 2 3 4 5 6 7 8 9 10 11 | var vm = new Vue({ el: "#app", data: { content: "Lifecycle Hooks" }, beforeDestroy () { this.content = null delete this.content }, }) |
- destroyed hook: At this point, all components are destroyed. When console.log () this object does not get any properties or data.
1 2 3 4 5 6 7 8 9 10 | var vm = new Vue({ el: "#app", data: { content: "Lifecycle Hooks" }, destroyed () { console.log(this) //thời điểm này sẽ không nhận được gì ở console. }, }) |
End:
Thus, through this article, I have shared some of the knowledge that I have learned about the life cycle of a Vue Instance. Thank you everyone for following the article. If you have comments on the article, leave your comments below! 
If it helps everyone a bit, please press upvote for me.