钩子函数详细描述
钩子函数 | 说明 |
---|---|
beforeCreate | this.$options初始化完成,生命周期钩子函数、事件函数、渲染函数等已挂载到Vue.prototype上 |
created | inject、data、method、computed、prop、provide可以访问了,但真实dom还没有生成,this.$el还不可用 |
beforeMount | render函数首次被调用,dom已在内存中生成,但还未挂载到页面 |
mounted | el 被新创建的 this.$ el 替换,并挂载到实例上去之后调用该钩子,可以使用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的钩子函数,路由离开此组件时触发 |
生命周期详细图解
参考:生命周期图解