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

Editor to share with you what Vue life cycle functions are, I hope you will gain something after reading this article, let's discuss it together!

1.BeforeCreate ()

The Vue instance has been created, but the data and methods in data and methods have not been initialized. This means that you can get this,this in beforeCreated () {}, which refers to the current Vue instance or component, but this.data,this.method is not available.

2.Created ()

Both data and method in Vue have been initialized. Data is generally initialized in this hook function.

The render function is executed after this phase and before BeforeMounte. Vue renders the code as an in-memory DOM, the virtual DOM. It has not been mounted to the page.

After that, before beforeMount, the Vue constructor checks the configuration item for the el attribute. If so, replace the nodes in the html document. Then determine whether the template option is specified, and if so, replace the node with template, and if not, replace the node with el.

3.BeforeMount ()

Function, the dom in the page before it was replaced by the virtual dom

Beat a chestnut.

Let vm = new Vue ({el:'# app', data: {message: 'wxs', arr: [1meme 2Mae 3], obj: {name:'wxs', age:21}} BeforeMount () {console.log (document.querySelector ("# app"))}, mounted () {console.log (document.querySelector ("# app"))}, methods: {}, watch: {}, template: `

{{message}}

{{arr [0]}}

{{obj.name}}

Change!

`,})

Then look at the printed results.

4.Mounted ()

The page shows the elements that have been replaced.

These are the hook functions during the creation of the Vue component

The following is the hook function during the run of the component.

5.beforeUpdate ()

The way to trigger this hook function is to change the value in data. You can also get the value before the update in this hook function.

In this hook function, the interface has not been updated, but the data value has been updated. (summary: old pages, new data)

Vue secretly performs re-rendering and mounting of Virtual Dom in memory after beforeupdate and before update.

6.update ()

You can get the value of the new interface and the new data value in this hook. (summary: new interface, new data)

Test code and screenshots

Let comp = {template: "

{{msg}}

Changed.

", data () {return {msg: 'initial text'}}, methods: {change: function () {this.msg = 'changed'}} BeforeUpdate () {console.log (document.getElementById ('app') [xss_clean])}, updated () {console.log (document.getElementById (' app') [xss_clean])}} let vm = new Vue ({el:'# app', data () {return {}} Components: {comp},})

The next step is the destruction phase.

7.beforedestroy ()

Enter the instance destruction phase. All data and methods in the instance are still available.

8.destroyed ()

The function instance has been destroyed and all data and methods are not available.

After reading this article, I believe you have a certain understanding of "what are the Vue life cycle functions". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.