一、组件生命周期

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

actived和deactived

除此之外，如果被组件keep-alive包裹的组件，还具有actived和deactived两个声明周期

二、父子组件生命周期

1.加载的时候

当父组件执行完beforeMount挂载开始后，会依次执行子组件中的钩子，直到全部子组件mounted挂载到实例上，父组件才会进入mounted钩子

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

2、更新的时候

1）子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated

2）父组件更新过程：父beforeUpdate->父updated

3、销毁的时候

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

三、路由切换组件生命周期

1、写两个跳转，一个是跳转HomePage一个是About

2、在两个页面的生命周期中打印值

可以发现：

组件创建以及卸载情况如下：当从一个组件跳到另外一个组件的时候，前一个组件要进入到先准备卸载（beforeUnmount），接着后一个组件从创建到进入到准备挂载(beforeCreated->beforeMount),最后，前一个组件正式卸载(unmounted)，后一个组件正式挂载(mounted).