I. Life cycle of Vue
1. Hook Function
The hook function describes the entire life cycle of a Vue instance from creation to destruction, as shown in the following table:
| hook | Explain |
|---|---|
| beforeCreate | Execute before creating instance object |
| created | Execute after instance object is created |
| beforeMount | Execute before page mount succeeds |
| mounted | Execute after page mount succeeds |
| beforeUpdate | Execute before component update |
| updated | Execute after component update |
| beforeDestroy | Execute before instance is destroyed |
| destroyed | Execute after instance is destroyed |
2. Instance Creation
The following code shows the use of the beforeCreate and created hook functions:
<div id="app">{{msg}}</div>
<script>
var vm = new Vue({
el: '#app',
data: { msg: 'Zhang San' },
beforeCreate () {
console.log('Before instance creation')
console.log(this.$data.msg)
},
created () {
console.log('After instance creation')
console.log(this.$data.msg)
}
})
</script>
// Run result:
// "Before instance creation"
// error: Cannot read property 'msg' ...
// "After instance creation"
// "Zhang San"
In the above code, the beforeCreate hook function failed to output msg because the data has not been listened on at this time and the page has no mounted objects. When the created hook function executed, the data was bound to the object instance, but the object was not mounted.
3. Page mounting
Once the Vue instance is created, page mounts occur if the mount point el exists. The following code shows the use of the beforeMount and mounted hook functions:
<div id="app">{{msg}}</div>
<script>
var vm = new Vue({
el: '#app',
data: { msg: 'Zhang San' },
beforeMount () {
console.log('Before mounting')
console.log(this.$el.innerHTML) // By this.$el Gets the DOM element of el
},
mounted () {
console.log('After mounting')
console.log(this.$el.innerHTML)
}
})
</script>
// Run Results
// "Before mounting"
// {{msg}}
// "After mounting"
// "Zhang San"
In the code above, the page cannot display page data because the data is not associated with the $el object before mounting. After mounting, the msg data is obtained and displayed on the page through the interpolation syntax.
4. Data Update
When the Vue instance is mounted, the beforeUpdate and updated hook functions are executed when the data changes. The following code shows the use of the beforeUpdate and updated hook functions:
<div id="app">
<div v-if="isShow" ref="self">test</div>
<button @click="isShow=!isShow">To update</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
beforeUpdate() {
console.log('Before update')
console.log(this.$refs.self)
},
updated() {
console.log('After update')
console.log(this.$refs.self)
}
})
</script>
// First click on the Update button:
// Before update
// undefined
// After update
// <div>test</div>
// Second click on the Update button:
// Before update
// <div>test</div>
// After update
// undefined
In the above code, ref is used to register reference information for an element and set to self to indicate that it references itself.
5. Instance Destroy
The final stage of the life cycle is the destruction of the instance, which executes the beforeDestroy and destroyed hook functions.
<div id="app">
<div ref="self">test</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Zhang San'
},
beforeDestroy() {
console.log('Before destruction')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
},
destroyed() {
console.log('After destruction')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
}
})
</script>
// Execute vm. $in console Destroy() function
// Run result:
// Before destruction
// <div>test</div>
// Zhang San
// Vue{......}
// After destruction
// undefined
// Zhang San
// Vue{......}
As you can see from the running results, the vm instance exists when the beforeDestroy and destroyed functions are executed, but the div element of the page is not available after the instance is destroyed. Therefore, DOM elements cannot be manipulated after the instance is destroyed.