vue源码学习总结 lifecycle深度解析

钩子函数详细描述

钩子函数	说明
beforeCreate	this.$options初始化完成，生命周期钩子函数、事件函数、渲染函数等已挂载到Vue.prototype上
created	inject、data、method、computed、prop、provide可以访问了，但真实dom还没有生成，this.$el还不可用
beforeMount	this.$el挂载点查找到了
mounted	render函数首次被调用，可以使用this.$refs操作dom了
beforeUpdate	data已经是最新的了，但是页面dom还是旧的
updated	data和页面dom都是最新的
beforeDestory	组件销毁前调用，data、prop等都可以正常使用
destoryed	组件销毁后调用，data、prop等都不可使用了
errorCaptured	组件报错的时候调用
activited	keep-alive组件才有，组件被激活时调用
deadctivated	keep-alive组件才有，组件被销毁时调用
beforeRouteEnter	vue-router的钩子函数，路由进入此组件时触发
beforeRouteUpdate	vue-router的钩子函数，路由路径变更时触发
beforeRouteLeave	vue-router的钩子函数，路由离开此组件时触发

生命周期详细图解

参考：生命周期图解

关注下再走呗 +_+