vue生命周期钩子函数详细示例代码GIF动态图解释

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

生命周期	阶段	描述
beforeCreated	创建前	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created	创建后	vue实例的数据对象data有了，$el还没有。
beforeMount	模板载入前	vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换
mounted	模板载入后	vue实例挂载完成，data.message成功渲染。
beforeUpdate	组件更新前	组件更新之前调用
updated	组件更新后	组件更新之后调用
beforeDestroy	组件销毁前	调用$destroy方法后，立即执行beforeDestroy
pdestroyed	组件销毁后	组件销毁后调用，此时只剩下dom空壳

1、 页面渲染期

beforeCreate()  created()   页面创建之前 / 完成

beforeMount()  mounted(） 页面挂载之前 / 完成