一个实例从开始到最后消亡所经历的各种状态,就是一个实例的生命周期
钩子函数 - beforeCreate()
说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意:此时,无法获取 data中的数据、methods中的方法
钩子函数 - created()
注意:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据
钩子函数 - beforeMounted()
说明:在挂载开始之前被调用,此时无法进行DOM操作
钩子函数 - mounted()
说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作
钩子函数 - beforeUpdated()
说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
钩子函数 - updated()
说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
钩子函数 - beforeDestroy()
说明:实例销毁之前调用。在这一步,实例仍然完全可用。
使用场景:实例销毁之前,执行清理任务,比如:清除定时器等
钩子函数 - destroyed()
说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

生命周期图