vue生命周期

vue生命周期钩子函数

简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。

生命周期钩子函数的定义：从组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着各种各样的事件，这些事件，统称为组件的生命周期函数。

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实例指示的所有东西都会解绑，所有的时间监听器都会被移除，所有的子实例都会被销毁。