vue中生命周期函数

Vue 在运行过程中从创建实例阶段到最终的销毁整个过程称为生命周期，在这期间运行的钩子函数称为生命周期函数。

我们在通过new Vue()创建实例的过程中经过了一下过程：

beforeCreate

在实例初始化之后,进行数据侦听和事件/侦听器的配置之前调用此函数，也就是说在这个函数中当前模块的实例还没有data数据，和methods 方法。

created

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。在这个阶段我们可以访问data中的数据，也可以调用methods中的方法，我们在这个阶段可以发起异步请求去请求一些接口的数据进行准备渲染工作。

beforeMount

在挂载开始之前被调用：相关的 render函数首次被调用。这个时候只是把虚拟的dom元素准备完毕，等待把虚拟dom渲染成真实的dom树，在这个阶段我们也可以请求一些异步接口进行数据的更改或者渲染。

mounted

$el元素挂载完毕后调用的方法，这个时候vue已经把虚拟dom渲染成了真实的dom元素，可以对页面上的dom元素进行操作，同时我们也可以在这个阶段进行一些接口的请求，但是这里需要注意的是如果dom树中的一些数据用到了这里才赋值到data中的数据，页面可能会报错，或者是会看到数据更新的延迟。

beforeUpdate

当元素中的数据发生改变后调用的钩子函数，次钩子函数会在组件的data数据更新后dom元素更新之前进行调用，主要是用来拦截数据更改不是预期的情况下停止对该数据进行渲染并还原数据。

updated

当虚拟dom根据更改后的data数据进行了从新渲染并更新后的钩子函数。

activated

此钩子函数作用于使用了keep-alive标签包裹的组件，并且当该组件被激活的时候进行调用，也就是该组件被渲染到页面上，如果组件是第一次渲染，他会在mounted方法之后调用，之后的销毁和激活只会运行该函数

deactivated

此钩子函数作用于使用了keep-alive标签包裹的组件，并且当该组件被失去激活状态的时候进行调用，也就是该组件被移除页面。

beforeDestory

当组件被销毁前调用的钩子函数，在这个函数里边组件实例中的数据都是可以正常使用的，我们可以在这个钩子函数里边执行一下内存释放操作，比如可以把不用的变量复制为null,把使用eventBus事件总线的一些方法进行解绑等操作。

destoryed

组件实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

生命周期函数的执行顺序是:

1. 组件被激活的过程中，生命周期函数执行顺序：
   beforeCreated —>create —>beforeMount —> mounted —>
   如果在mounted钩子函数中有更新data中的数据，会先调用beforeUpdate方法，然后调用 —> activated —> updated
2. 组件数据被更新的时候：
   beforeUpdate —> updated
3. 组件被销毁的情况下：
   beforeDestroy —> destoryed
   如果组件是被keep-alive标签包裹的情况下，不会执行销毁事件，而是调用 deactivated方法。

嵌套组件的生命周期执行顺序

我们在做项目的时候经常会把一个页面分成很多组件，然后在需要用到的时候进行调用，这个时候就涉及到组件调用组件的情况，有时候也被称为根组件、父组件、子组件、后代组件等。在组件嵌套的情况下的生命周期函数的执行顺序是

1. 组件激活情况下：
   (父)beforeCreated —>(父)create —>(父)beforeMount —> (子)beforeCreated —>(子)create —>(子)beforeMount—> (子)mounted —> (父)mounted
2. 组件数据更新，在子组件使用了父组件的数据的情况下会触发子组件：
   (父)beforeUpdate —> (子)beforeUpdate —> (子)updated —> (父)updated
3. 组件被销毁：
   (父)beforeDestory —> (子)beforeDestory —> (子)destoryed —> (父)destoryed