How many hook functions are there in vue.js

There are eight hook functions in vue.js, which are: 1. beforeCreate is used before creation; 2. created is used after creation; 3. beforeMount is used before mounting; 4. mounted is used for mounting. After loading; 5. beforeDestroy is used before destruction.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

There are eight hook functions in vue.js, which are:

1. beforeCreate: Before creation

1. The current vue instantiation An initialization operation will be performed at some time. In this life cycle function, we can do initial loading

2. The properties in data cannot be accessed in the current function, but they can be accessed through the instance object of vue

2. created: after creation

1. When beforeCreate is executed, created will be executed. In the current function, we can access the properties in data

2. When the current life cycle function is executed, all the properties in the data and all the methods in the methods will be added to the vue instance. At the same time,

will add a getter/setter method to all the properties in the data.

3. If you need to perform data interaction on the front and rear end (when AJAX request), you need to use

# 3 in the current life cycle, beForemount: before mounting

## (rendering)

##                                                                                                                                                                                             The render function is called for the first time ----> the data and template have not been combined, and it has not yet been rendered to the html page.

##4. mounted: After mounting

1. The data and template are combined and rendered into a real DOM structure

2. We can access it in the current life cycle function To the real DOM structure,

3. In vue we can access the real DOM structure through $refs

4. The ref is similar to the id and the value must be unique when accessed We can pass this.$refs.property

5. beforeDestroy: before destruction

                                                                                                                                                                                     .  -  can also be accessed. In the life cycle function, we can remove the bound events

6. destroyed: After destruction

In this life cycle function, the relationship between the data and the template will be disconnected ( Not made by you)

In this life cycle function we can still access the properties in data

But we can’t access the real DOM structure

7. beforeUpdate: Before update

As long as the attributes in the data change, then this life cycle will be executed, and the render function will be executed again

In this life cycle function we can perform the final processing on the data modification, you can also access the latest DOM structure and data

8. updated:After update

In the current life cycle function, we can access the latest DOM structure (after data update The latest DOM structure) and data

Related learning recommendations:

javascript video tutorial

The above is the detailed content of How many hook functions are there in vue.js. For more information, please follow other related articles on the PHP Chinese website!