前端学习之vue的生命周期函数

一、什么是生命周期函数

        我想，对于生命周期，咱都不会陌生，所谓生命周期，就是一个过程，从开始到结束，顾名思义，就像生命一样，从诞生到消逝。而生命周期函数，就是在这个生命周期的不同阶段中会被调用的函数，也可以比作人的一生，在不同的阶段要做不同的事（这个命名可以说是非常的人性化）。

        vue中的生命周期函数，是写在vue的实例对象中，与data , methods等处于统一等级，生命周期函数不用我们特地去调用，只要写了，它就会在相应的阶段被自动调用。

二、vue的生命周期函数有哪些

        目前接触的vue中生命周期函数一共有八种，也可以说是四对（在组件路由还会接触三个）。

下面是vue官网上的一幅生命周期的图示，红色的框便是被标注的生命周期函数。

1.beforeCreate()

       创建之前，那么，是创建什么之前呢？这里的意思是初始化整个生命周期，也就是生命周期开始之前会被调用的一个函数，在这个阶段数据代理未开始，也无法访问vue实例对象中的data数据或是methods方法的。

2.created()

        创建后，这同样是生命周期初始化时会被调用的一个函数，与beforeCreate()函数不同的是，created()可以访问data或methods方法，也可以进行数据代理或是数据监听等操作。

3. beforeMount()

        挂载之前，也就是说vue实例对象里边那个el挂载之前，因为是挂载之前，所以在这个阶段生成的都还是虚拟DOM，在页面中呈现未经vue编译的DOM结构，在beforeMount()中操作DOM元素都是无效的。

4.mounted()

        挂载完成，这是一个重点会使用到的生命周期函数，因为在这个阶段，虚拟DOM被vue编译转为真实的DOM传入页面中。

        在这个阶段中，对DOM的操作都是有效的，但是，对于vue来说，不提倡操作DOM元素，因此，虽然可以操作DOM元素，我们也应该尽量避免。在这个阶段，一般会进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。

5.beforeUpdate()

       更新之前，它一般在data中的数据经过一些操作发生改变时被调用，beforeUpdate()要注意的是，这个阶段data中的数据经过操作是更新了，但是渲染到页面上的数据还不会发生变化。

6.updated()

        更新完成，updated()和beforeUpdate()差不多，不同的是updated()这个阶段，data中的数据，和渲染到页面上的数据都会发生改变（页面和数据保持同步）。

7.beforeDestroy ()

        销毁之前，这也是一个会重点会使用到的生命周期函数，一般这个函数的作用我们可以理解成，销毁之前的”善后工作“，也就是通常把当前vue实例，亦或是组件销毁前要做的一些操作写入其中。

        在这个阶段中，vue实例对象中的data , methods等仍处于可用的状态，我们一般会在beforeDestroy ()进行，关闭定时器，取消订阅消息，解绑自定义事件等操作。

8.destroyed ()

        销毁后，这个函数基本碰不到，也就没啥说头，连官网上页没作过多解释，所以这个生命周期函数很尴尬，我们基本忽略，但也要知道有这么一个生命周期函数。