Vue2.x的生命周期图，从创建到销毁，分为了这几个阶段：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

1.beforeCreate

第一个周期函数，Vue实例创建之前会执行它，此时data和methods中的数据或方法还未初始化，无法调用，只能使用一些默认事件。

我们定义了一个data数据和一个方法，可以看到，我们想在beforeCreate钩子函数里面想要获取data和methods是获取不到的，因为这个时候它们还未初始化。

2.created

顾名思义，该钩子函数是在Vue实例化之后执行的，此时data和methods已经初始化完成了，可以供我们调用，但是模板还没有编译，也就是我们还不能获取到DOM。

可以看到data和methods可以获取到了，但是el节点还不能获取，因为此时模板渲染还没有开始。

3.beforeMount

该钩子函数在模板渲染之前调用，也就是DOM节点挂载到真实DOM树之前调用。此模板进行编译，会调用render函数生成vDom，也就是虚拟DOM，此时我们同样无法获取DOM节点。

可以看到此时我们同样是无法获取DOM节点的，因为此时只存在VDOM，还在JS级别。

4.mounted

执行该钩子函数时，我们的模板编译好了，而且挂载到真实DOM树上面去了，也就是我们的页面可以显示了。

此时我们可以获取到DOM节点了。

5.beforeUpdate

上面的生命周期函数其实都发生在初始化阶段，当我们的页面或者组件发生变化时，便会执行对应的更新阶段的钩子函数。

该钩子函数在data数据发生变化之后调用，此时data里面的数据已经是最新的了，但是页面上DOM还没有更新最新的数据。

我们新增了一个改变data数据的方法，点击页面上的按钮便会更改数据，然后我们在beforeUpdate钩子函数后面打了一个断点。此时会发现控制台打印的msg和页面上的msg不一致，这也就印证beforeUpdate发生在data更新之后，DOM渲染之前。

6.updated

该钩子函数会在data数据更新之后执行，而且此时页面也渲染更新完成了，显示的就是最新的数据。

和beforeUpdate代码一样，我们在updated钩子函数后面打了一个断点，当执行该钩子函数的时候，我们发现此时页面上的数据和我们data中的数据是一致的，说明此时data和页面都已经完成了更新。

注意：不要在updated中修改data数据，很容易造成死循环。

7.beforeDestroy

此钩子函数发生在Vue组件实例销毁之前，此时组件实际上还没有被销毁，还可以正常使用。我们通常会在这个钩子函数里面解除一些全局或者自定义事件。

8.destroyed

此钩子函数会在组件实例销毁之后执行，此时所有的组件包括子组件都被销毁了。

通常这个时候只剩下了DOM空壳了。

补充

通常情况下我们切换路由等一些操作时，组件都会被销毁，切换回来的时候组件又重新渲染。但是有时候我们为了提高性能，我们可以在切换路由的时候不必销毁组件，这个时候我们就需要用到Vue的一个内置组件keep-alive。

使用keep-alive组件包裹后的组件则不会被销毁，使用keep-alive这种方式之后，我们便会多出两个生命周期函数。

9.1 activated

页面渲染的时候执行。

实例代码：

<keep-alive>
  <router-view />
</keep-alive>
activated(){
  console.log("home组件被渲染")
}
复制代码

输出结果：

上段代码中我们将路由组件使用keep-alive包裹了起来，当我们第一次渲染组件的时候会执行组件的mounted钩子函数，但是当我们不停切换路由的时候，mounted钩子函数没有被执行了，只执行了activated钩子函数，说明组件并没有被销毁。

9.2 deactivated

页面被隐藏或者页面即将被替换成新的页面时被执行。