The life cycle is a series of processes of components or instances, from creation to destruction (initializing data, compiling templates, mounting DOM, rendering-updating-rendering, unloading), we call this the life cycle of Vue
Article directory
1. The life cycle stages of Vue
The vue life cycle is divided into four stages.
The first stage (creation stage): beforeCreate, created
The second stage (mounting stage): beforeMount (render), mounted
The third stage (update stage): beforeUpdate, updated
The fourth stage (destruction phase): beforeDestroy, destroyed
2. Life cycle hook function
1. beforeCreate
Official website : After the instance is initialized, it is called synchronously before data listening and event/listener configuration.
Details : At this stage, the data is not available, and the real DOM elements are not rendered
2. created
Official website : Called synchronously immediately after the instance is created. At this step, the instance has finished processing the options, meaning the following has been configured: data listeners, computed properties, methods, callback functions for events/listeners. However, the mount phase has not yet started, and the $el property is not yet available.
Details : At this stage, the data can be accessed , but the real DOM nodes in the page are still not rendered. In this hook function, you can bind related initialization events and send request operations
3. beforeMount
Official website : called before the mount starts: the relevant render function is called for the first time.
Details : It means that the dom will be rendered soon, but it has not been rendered yet. This hook function is basically the same as the created hook function. It can bind related initialization events and send ajax operations
4. mounted
Official website : Called after the instance is mounted, at this time el is replaced by the newly created vm.$el. If the root instance is mounted on an element within the document, vm.$el is also within the document when mounted is called.
Note that mounted does not guarantee that all subcomponents are also mounted. If you want to wait until the entire view is rendered before performing some operations, you can use vm.$nextTick inside mounted:
Details : The last hook function in the mount phase, the data has been mounted, and the real DOM elements have been rendered. This hook function can do some instantiation-related operations inside
5. beforeUpdate
Official website : Called after the data changes and before the DOM is updated. This is suitable for accessing the existing DOM before it is about to be updated, such as removing manually added event listeners.
Details : This hook function will not be executed when it is initialized. When the component is mounted and the data changes, it will be executed immediately. The content of the dom obtained by this hook function is the content before the update
6. updated
Official Website : Called after the virtual DOM has been re-rendered and updated due to data changes.
When this hook is called, the component DOM has been updated, so you can now perform operations that depend on the DOM. In most cases, however, you should avoid changing state during this time. If you want to respond to state changes, it's usually better to use computed properties or watchers instead.
Details : This hook function obtains the content of the dom and generates a new virtual dom with the updated content. The new virtual dom is compared with the previous virtual dom. After the difference, the real dom will be rendered. In the updated hook function, you can get the real dom rendering due to the difference of the diff algorithm.
7. beforeDestroy
Official website : Called before the instance is destroyed. At this step, the instance is still fully available.
Details : When the component is destroyed, this hook function will be triggered, which means that before the destruction, some aftermath operations can be done, and some initialization events and timer-related things can be cleared.
8. destroyed
Official website : Called after the instance is destroyed. After the hook is called, all instructions corresponding to the Vue instance are unbound, all event listeners are removed, and all sub-instances are also destroyed.
Verbose : The Vue instance is deactivated, completely losing functionality
<template>
<div id="app">
<p id="box">{
{msg}}</p>
<button @click="change">更新</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
change () {
this.msg = 'hello world'
}
},
beforeCreate () {
console.log('---------------->beforeCreate')
console.log(this.msg, document.getElementById('box'))
},
created () {
console.log('---------------->created')
console.log(this.msg, document.getElementById('box'))
},
beforeMount () {
console.log('---------------->beforeMount')
console.log(this.msg, document.getElementById('box'))
},
mounted () {
console.log('---------------->mounted')
console.log(this.msg, document.getElementById('box'))
},
beforeUpdate () {
console.log('---------------->beforeUpdate')
console.log(this.$el.innerHTML)
console.log(this.msg, document.getElementById('box'))
},
updated () {
console.log('---------------->updated')
console.log(this.$el.innerHTML)
console.log(this.msg, document.getElementById('box'))
}
}
</script>
After the page is initialized and mounted,
When the data changes, it will trigger beforeUpdate and updated two hook functions
