Vue 组件生命周期

        每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

        组件的生命周期分为四个阶段：create（创建）、mount（挂载）、update（更新）、destroy（销毁） 。每个阶段有"之前"、"之后"两个，总共有 8 个生命周期钩子函数。

Vue 生命周期示意图：

生命周期函数 

beforeCreate：

1. 刚初始化了一个 Vue 空的实例对象；
2. data 和 methods 还没有初始化；
3. 真实 DOM 没有渲染出来；

created：

1. 组件创建结束；
2. 可以操作 data 数据，和调用 methods 方法；
3. 进行ajax请求异步数据的、初始化数据；
4. 真实 DOM 没有渲染出来；

beforeMount：

1. 模板编译好了，尚未挂载到页面；
2. 真实 DOM 没有渲染出来；

mounted：

1. 组件挂载好了；
2. 可以进行真实dom的操作；

beforeUpdate：

1. data 数据更改后触发；
2. 可以触发多次,只要数据更新就会触发；

updated：

1. 页面更新完成时触发；
2. 可以触发多次,只要数据更新就会触发；

beforeDestroy：

1. 销毁前触发；
2. vue 实例上 data，methods，指令等处于可用状态；
3. 可以执行计时器的关闭，第三方实例的删除；

destroyed：

1. 销毁后触发；
2. vue 实例上 data，methods，指令等处于不可用状态；

keep-alive

        添加 keep-alive 标签后会增加 activated 和 deactivated 这两个生命周期函数，初始化操作放在 actived 里面，一旦切换组件，因为组件是缓存的而没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在 deactived 里面，在里面进行一些善后操作，这个时候 created 钩子函数只会组件首次加载时执行一次，销毁的钩子函数一直没有执行。

        activated(组件激活时)：被 keep-alive 缓存的组件激活时调用，可以初始化一些数据。

        deactivated(组件停用时)：被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作。

nextTick()

        在下次 DOM 更新循环结束之后执行回调。在修改数据之后使用 nextTick，则可以在回调中获取更新后的 DOM ，简单理解：数据更新了，在 DOM 渲染完成后调用该函数。

        注意：在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。