Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the life cycle and hook function in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the life cycle and hook function in vue".

1. What is the life cycle?

Vue instances have a complete life cycle, that is, from the beginning to create, initialize data, compile templates, mount Dom, render → update → rendering, uninstall and other processes, we call this the life cycle of Vue. Generally speaking, it is the life cycle of an Vue instance from creation to destruction.

Throughout the life cycle of Vue, it provides a series of events that allow us to register js methods when events are triggered, and to control the overall situation with our own registered js methods. The this in these event response methods points directly to the instance of vue.

Life cycle of 2.vue

Life cycle function, also known as hook function (life cycle hook = = life cycle function = = life cycle event)

Life cycle functions in vue generally appear in pairs. So let's compare the difference between them in pairs.

Keep 10 lifecycle functions in mind! Specific use!

3. Life cycle hook function

Features: they are called automatically, but their time nodes are called first and later.

BeforeCreate-vue instance "before creation". Note: in this function, the data from the data datacenter in vue cannot be read.

Let vm = new Vue ({el:'#app', data: {name: "ha ha", num:1111}, methods: {} / / before vue instance is created, beforeCreate () {console.log ('beforeCreate') Console.log (this.name);}

The name of the output data center is not readable:

Created-vue instance "after creation". Note: in this function You can recognize the data let vm = new Vue of data data center in vue ({el:'#app', data: {name: "ha ha", num:1111}, / / created () {console.log ("created") after the creation of vue instance) Console.log (this.name);}})

View the results:

BeforeMount-before DOM mounts, the $el of this.$el--- at this time is a "virtual" DOM node

Render the label at the view layer:

{{name}}

{{num}}

Let vm = new Vue ({el:'#app', data: {name: "ha ha", num:1111}, / / beforeMount () {console.log ("beforeMount") before mounting dom) / / View dom element console.log (document.body.querySelector ("# app") [xss_clean]);}})

Output result before dom mount:

Mounted-the $el of this.$el--- at this time after DOM mount is "real" DOM node let vm = new Vue ({el:'#app', data: {name: "ha ha", num:1111} / / mounted () {console.log ("mounted") after dom mount Console.log (document.body.querySelector ("# app") [xss_clean]);}})

View the output:

BeforeUpdate-before and after the data update (before and after the data in the view layer)

Updated-after the data is updated (before and after the data in the view layer)

In the view layer, click to change the value of num to simulate the data update and view the results:

{{num}}

Click data update (num+1) / / beforeUpdate before data update () {console.log ("before beforeUpdate-- data update"); / / View dom element console.log (document.body.querySelector ("# num") [xss_clean]) }, / / updated () {console.log after data update ("after updated-- data update"); / / View dom element console.log (document.body.querySelector ("# num") [xss_clean]);}

When there is no change in the data, you can't see the effect on the console. When we click the button:

Thank you for your reading, the above is the content of "what is the life cycle and hook function in vue". After the study of this article, I believe you have a deeper understanding of the life cycle and hook function in vue. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.