Vue 生命周期 #

beforeCreate：

在初始化 Lifecycle、Events 事件之后调用，此时data、props还没被初始化，不能访问相关的数据

created:

在这个钩子调用之前，传入的数据和方法已经初始化到实例上了，并且已经完成了数据监测的双向绑定，这个阶段可以进行操作数据和使用方法

在这个钩子中请求 Ajax 数据是比较合适的，原因是尽早的发出请求，可以减少用户等待时间

这个时候，实例还没有挂载，所以不可以进行有关DOM的操作

beforeMount:

mounted:

在该钩子被调用时，Vue实例已经成功挂载在页面上了，$el已经替换为生成的DOM，并且替换掉了页面的原来的$el，并且对应的数据和视图已经形成双向绑定。在这里可以进行一些DOM相关的操作

beforeUpdate:

Vue的数据更新导致视图更新是一个异步的过程，在一次事件循环过程中，无论改变了多少个数据或同一个数据修改了多少次，最终都只会执行一次视图更新。

beforeUpdate是在视图更新前调用，所以在这里我们能取到所有改变的数据，并且进行最后一次修改

updated:

activated:

在使用 vue-router 并且使用keep-alive缓存路由页面时触发。

比较经典的使用场景是缓存滚动条的位置。vue-router切换不同路由的时候，即使我们使用 keep-alive也不会缓存滚动条的位置，所以这个时候只需要记住scrollTop存放在当前实例中，因为使用缓存，所以当切换到其它路由时，这个实例也不会销毁，当再次激活时，会触发这个生命周期函数，将scrollTop赋值给滚动元素，就可以缓存滚动条的位置。

另一个场景是，根据路由参数刷新路由页面的数据

deactivated:

beforeDestory:

destroyed:

实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解除绑定，所有的事件监听被移除，所有的子实例也都被销毁。但需要注意的是，如果给一个DOM绑定一个click事件，那么该事件不会被销毁（即原生事件不会被解除）