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

In this article Xiaobian for you to introduce in detail the "Vue component life cycle case analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue component life cycle instance analysis" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

1. The life cycle of a component is divided into four phases:-create (create)-mount (mount)-update (update)-destroy (destroy) 2. Life cycle Hook function 2.1 Hook function definition

Let's take a look at the official explanation: each Vue instance goes through a series of initialization processes when it is created-for example, setting up data listening, compiling templates, mounting the instance to DOM and updating DOM when the data changes. At the same time, some functions called lifecycle hooks are run in the process, which gives users the opportunity to add their own code at different stages.

What exactly does a hook function mean? A function that is automatically triggered when a component is loaded to a certain stage during the loading process.

2.2 understanding and examples of hook functions

1. BeforeCreate is called after the instance initialization and before the data observation (data observer) and event/watcher events are configured. If you access the data data object in the beforeCreate function, you cannot access it.

New Vue ({el: "# app", data: {msg:'123'}, watch: {msg:function () {console.log ("I've changed"), beforeCreate () {console.log ("automatically triggered ~ ~ before creating component data objects"); console.log ("beforeCreate", this.msg) })

Result: the value of msg cannot be obtained in the beforeCreate function

2. Created

The data object data is available before the created function is executed, and the event is initialized, but the $el property is not currently visible

Data can be used or changed in the created function

By calling the Vue method, you can get the DOM loaded directly on the original HTML, but cannot get the DOM generated by mounting the template (for example, v-for loop traverses the Vue.list to generate li)

New Vue ({el: "# app", data: {msg:'123'}, watch: {msg:function () {console.log ("I've changed"), beforeCreate () {console.log ("automatically triggered ~ ~ before creating component data objects"); console.log ("beforeCreated", this.msg) }, created:function () {console.log ("automatically triggered after the component data object is created); this.msg=100000; console.log (" created ", this.msg); console.log (" li quantity: ", document.getElementsByTagName (" li ") .length); console.log (" p quantity: ", document.getElementsByTagName (" p ") .length);}})

The result: we successfully got and changed the value of msg in the created function. And after the data is changed, the method in the watch property is started. And you can get the directly loaded DOM (p element) on the original HTML, but cannot get the DOM generated by mounting the template (for example, v-for loop traverses the Vue.list to generate the li element)

Note: virtual dom has not been created in the create phase

3.beforeMount

It is called before the mount starts, and the relevant (rendering function) template is called for the first time. The $el property is visible. However, it is still impossible to get the DOM generated by mounting the template in the beforeMount function (for example, v-for loop traverses Vue.list to generate li elements)

No virtual dom has been established before this function

BeforeMount:function () {console.log (this.$el); console.log ("li quantity:", document.getElementsByTagName ("li") .length);}

4.mounted

After the beforeMount function is executed, the $el elel is replaced by the newly created vm.$el and mounted to the instance and the hook function is called.

Only here can we get the initial data li rendered by list.

After mounting, we can already see the content of the web page, but it hasn't been operated yet.

Mounted:function () {console.log (this.$el); console.log ("li quantity:", document.getElementsByTagName ("li") .length);}

Result: the same code has completely different results in beforeMount and mounted functions.

In the update phase, the virtual dom listens for data changes and updates the dom at any time

5. BeforeUpdate when the data changes, the hook function beforeUpdate will be executed.

6. Execute updated virtual dom after re-rendering

Called before the 7.beforeDestroy instance is destroyed. At this step, the example is still fully available

Called after the 8.destroyedVue instance is terminated. After the call, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed.

{{elem}}

P1

P2

P3

Quantity: {{count}} new Vue ({el: "# app", data: {msg:'123', list: ['axiaxiajiaoyuzhongjia], count:0}, watch: {msg:function () {console.log ("I have changed") }, beforeCreate () {console.log ("automatically trigger ~ ~ before creating a component data object"); console.log ("beforeCreated", this.msg);}, created:function () {console.log ("automatically trigger ~ ~ after creating a component data object"); this.msg=100000; console.log ("created", this.msg) Console.log ("li quantity:", document.getElementsByTagName ("li") .length); console.log ("p quantity:", document.getElementsByTagName ("p") .length);}, beforeMount:function () {console.log (this.$el); console.log ("li quantity:", document.getElementsByTagName ("li") .length) }, mounted:function () {console.log (this.$el); console.log ("li quantity:", document.getElementsByTagName ("li") .length); setInterval (() = > {this.count++) }, 1000)}, beforeUpdate () {console.log ("automatically triggered before updating the component's data variable)}, updated () {console.log (" automatically triggered after updating the component's data variable "); if (this.count > 3) {this.$destroy () }}, beforeDestroy () {console.log ("automatically trigger ~ ~ before destroying the current component")}, destroyed () {console.log ("automatically trigger ~ ~ after destroying the component") }}) after reading this, the article "Vue component Lifecycle instance Analysis" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

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.