Vue life cycle
Vue life cycle (also known as life cycle callback function, life cycle function, life cycle hook), refers to the function that vue helps us call some special names at critical moments.
The vue life cycle covers the entire process from vue instance creation to virtual dom generation to data binding, data monitoring, data rendering and destruction :
Vue instance initialization phase
1. Before the beforeCreate instance is initialized, some events and the default life cycle are completed. At this time, the data in data and the methods in methods cannot be accessed.
2. The created instance is initialized, and now you can access the data in data and the methods in methods
(At this point, asynchronous requests can be sent to render pure data)
Vue instance mount phase
3. Before the beforeMount instance is mounted to the template, the template is compiled and the virtual dom is generated and stored in memory:
(1) Check whether there is an el option. It is also possible without the el option. Use vm.$mount("#app") It is also possible to mount(2) Then check whether there is a template option, if not, select an external html as a template for compilation; if yes, compile the template into a render function. (That is to say, if there is a template option, it will use the template as the template for parsing, if we also manually write a render function, it will use the html element created by render as the template for parsing)
4. The mounted instance is mounted on the template, and the dom node can be accessed at this time.
(Asynchronous requests can also be sent at this time, mainly for rendering data such as charts, as well as data linkage)
(The first four life cycles will only be executed once, while beforeUpdate and updated will be executed multiple times, as long as there is a change in data, they will be executed.)
Vue instance update phase
5. The life cycle triggered by the beforeUpdate instance data change, at this time recompile the view layer dom element corresponding to the data (use the diff algorithm to update the view)
6. The life cycle triggered by the data change of the updated instance. At this time, the data is already up-to-date, and the view has been re-rendered
(The Vue instance will be destroyed when we close the project or switch components. We can also use vm.$destroy() to manually destroy the Vue instance.)
Vue instance destruction phase
7. Before the beforDestroy instance is destroyed, the Vue instance can still be accessed at this time
8. After the destroyed instance is destroyed, listeners, subcomponents and event listeners are cleared. If the data changes at this time, the template will not be recompiled.
Code display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- vue中使用ref属性来唯一标识一个html元素，相当于id -->
<div ref="container"></div>
{
{msg}}
<button @click="update">更新数据</button>
<button @click="destroy">销毁实例</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue'
},
// template: '<h1>{
{msg}}</h1>',
// render(h) {
// return h('h2', {}, this.msg)
// },
methods: {
update(){
this.msg = 'hello world!'
},
destroy(){
vm.$destroy()
}
},
// 生命周期
beforeCreate() {
console.log('beforeCreate 实例初始化之前', this.msg);
},
created() {
console.log('created 实例初始化完成 访问data和methods', this.msg);
},
beforeMount() {
console.log('beforeMount 实例挂载到页面之前', this.$refs['container']);
},
mounted() {
console.log('mounted 实例挂载到页面上 可以访问dom元素 异步请求', this.$refs['container']);
},
beforeUpdate() {
console.log('beforeUpdate 实例更新之前');
},
updated() {
console.log('updated 实例更新完毕');
},
beforeDestroy() {
console.log('beforeDestroy 实例销毁之前', this.msg);
},
destroyed() {
console.log('destroyed 实例销毁完成', this.msg);
}
});
// vm.$mount('#app')
// setTimeout(()=>{
// // vm.msg='hello world'
// // 手动销毁实例
// vm.$destroy()
// },8000)
</script>
</body>
</html>operation result: 
