超全面 vue 生命周期钩子函数 (8+3)

314 阅读3分钟

什么是生命周期

生命周期就是物体从诞生到死亡的过程,Vue的生命周期就是从初始化到销毁的过程

什么是钩子函数

vue的生命周期钩子函数是作者在设计vue的时候,在vue从初始化到销毁的这段时间内的特殊时间段给我们定义的一些定义函数的权利,定义了就会执行,不定义就不会执行,生命周期的钩子函数中的this,会默认指向vue的实例;

生命周期的八个钩子函数

  • 初始化阶段

    • beforeCreate
    • created
    • beforeMount
    • mounted
  • 更新阶段

    • beforeUpdate
    • updated
  • 销毁阶段

    • beforeDestroy
    • destroyed

1. beforeCreate (创建前)

实例在完全创建出来之前,这时候是访问不到 data 的数据和 methods 的方法的。
场景 可以在这里做一个 loading 效果,等页面加载完成(也就是 mounted() 之后再销毁这个 loading)

2. created (创建完成)

实例创建完成,可以访问 data 中的数据和调用 methods 中的方法,在这里会对 data 的属性进行遍历,给每个属性加上 getter 和 setter,实现数据的响应式, 但 DOM 还没生成。
场景 可以发一些 ajax 请求

3. beforeMount (挂载前)

实例挂载的 DOM 元素 $el 已经初始化,模板已经在内存中编译完成,只是还没将模板渲染到页面中

4. mounted (挂载完成)

页面已渲染完成,初始化阶段完成,可访问dom结
场景 数据交互,发送 ajax 请求

5. beforeUpdate (更新前)

当响应式数据发生变化时触发,此时数据更新了但内容还没更新

6. updated (更新完成)

当响应式数据发生变化时触发,此时数据更新了但页面还没更新 注意:这里不能修改响应数据,会导致修改操作进入死循环

7. beforeDestroy (销毁前)

实例销毁前调用,此时任然可以访问到实例,this 任指向实例对象
场景 清除定时器、解绑全局事件

8. destroyed (销毁完成)

Vue 实例销毁后调用。调用后,Vue 实例的所有东西都会解除绑定,所有的事件监听器也会被移除,所有的子实例也会被销毁。

还有三个生命周期钩子函数

  • keep-alive 有两个钩子函数(activated 、deactivated),component 有一个钩子函数(errorCaptrued)

keep-alive 和 component 是 Vue 的内置组件

keep-alive

关于 keep-alive 缓存组件的详细说明,请转移到 keep-alive详细介绍 看完秒懂

component

能动态显示一个组件,当切换下一个组件时,当前组件会被销毁

errorCaptured

当子孙组件出错时,会调用这个钩子函数,此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
<component :is="aaa"></component>
export default {
	name: 'aaa',
	errorCaptrued(err, errCom, info) {
		console.log('子组件出错');
		console.log(err);
		console.log(errCom);
		console.log(info);
	}
}