简单说:一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期。
生命周期钩子函数的定义:从组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着各种各样的事件,这些事件,统称为组件的生命周期函数。
PS:Vue在执行过程中会自动条用生命周期钩子函数,我们只需要提供这些钩子函数即可。
PS:钩子函数的名称都是Vue中规定好的。
1、beforeCreate()
说明:在实例初始化后,数据观测(data observer)和event/watcher事件配置之前被调用
注意:此时无法获取data中的数据、methods中的方法。
2、created()
说明:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据。
使用场景:发送请求获取数据
3、beforeMounted()
说明:在挂载开始之前被调用
4、mounted()
说明:此时,vue实例已经挂载到页面中,可以获取el中的DOM元素,进行DOM操作。
5、beforeUpdated()
说明:数据更新时调用,发送在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步更改状态,这不会触发附加的充渲染过程。
注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素更新之前的。
6、undated()
说明:组件DOM已经更新,所以你现在可以执行依赖DOM的操作。
7、beforeDestroy()
说明:实例销毁之前被调用。在这一步实例仍然完全可以用。
使用场景:实例销毁之前,执行清理任务,比如:清除定时器等。
8、destroyed()
说明:Vue实例销毁后被调用。调用后,Vue实例指示的所有东西都会解绑,所有的时间监听器都会被移除,所有的子实例都会被销毁。