一、什么是生命周期
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
生命周期的全过程
二、八个生命周期(钩子函数)
钩子函数 | 作用 |
beforeCreate | 创建vue实例之前执行,data中的数据都获取不到 |
created | 创建实例成功,可以在这里进行数据的请求,获取变量 |
beforeMount | 渲染DOM之前,虚拟DOM挂载到真实的DOM,但是获取不到DOM元素 |
mounted | 渲染DOM完成,可以获取DOM元素,可以进行DOM操作 |
beforeUpdate | 修改了变量,data数据更新了,但是页面并未和最新的数据保持同步 |
updated | data数据为最新的,页面也是最新的 |
beforeDestroy | 销毁vue实例之前,并没有销毁,解除了挂载 |
destroyed | 销毁vue实例,解除了事件监听以及和DOM的绑定 |
1、beforeCreate
//在这里边是拿不到data中的name值,也获取不到DOM元素,不能操作DOM元素
beforeCreate(){
console.log('创建实例之前',this.name); // 创建实例之前 undefined
console.log(document.querySelector('h2')) // null
},
2、created
//实例初始化之后,可以拿到data中的数据,但是不能操作DOM
//可以在created中发送请求
created(){
console.log('创建实例之后',this.name); // 创建实例之后 张三
console.log(document.querySelector('h2')) // null
},
3、beforeMount
//可以获取data中的数据,但是不能操作DOM元素
beforeMount(){
console.log('实例挂载之前',this.name); // 实例挂载之前 张三
console.log(document.querySelector('h2')) // null
}
4、mounted
//可以获取data数据,可以操作DOM元素
//虚拟DOM替换成了真实的DOM
mounted(){
console.log('实例挂载之后',this.name); // 创建实例之后 张三
console.log(document.querySelector('h2')) //打印出h2标签
}
打印结果:
5、beforeUpdate
// 更新数据之前执行
beforeUpdate(){
console.log('实例更新之前',)
},
6、updated
// 数据更新,虚拟的DOM更新,然后更新真实的DOM;最后触发这个函数
updated(){
console.log('实例更新之后');
},
7、beforeDestroy
//清除定时器,解绑绑定事件
beforeDestroy(){
console.log('实例销毁之前');
},
8、destroyed
// 销毁子组件,清除定时器,事件监听
// 元素的事件还在,但是更改数据不会再让视图进行更新了
destroyed(){
console.log('实例销毁之后');
}