vue生命周期

每个Vue实例，都会经过从创建到销毁的一系列过程，下图为vue官方提供的生命周期图解。

1.beforeCreate
初始化阶段，vue实例刚被初始化，this指向创建的实例，此时不能访问到data、computed、watch、methods上的数据和方法。该方法不常用，可初始化非响应式变量。

2.created
此时实例已经创建，可访问data、computed、watch、methods上的方法和数据，还没有挂载到DOM，$ref属性内容为空数组，不能访问$el的属性。常用于简单的ajax请求，页面的初始化。

3.beforeMount
在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

4.mounted
实例已经挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。常用于获取VNode信息，ajax请求操作，整个实例中只执行一次。

5.beforeupdate
响应式数据更新时调用，发生在虚拟DOM更新之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

6.updated
虚拟DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作。避免在这个钩子函数中操作数据，可能陷入死循环。

7.beforeDestroy
实例销毁之前调用。此时实例仍然完全可用，this仍能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

8.destroyed
实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

注意：
在路由跳转时，beforeDestroy和destroyed是在下一个页面created后调用的，所以这时this.$route.path是下一个页面的路由。
created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。
可以用 vm.$nextTick等整个视图都渲染完毕后再加载子组件。
methods是不可以使用箭头函数的，因为箭头函数的this是定义时就绑定的。在vue的内部，methods内每个方法的上下文是当前的vm组件实例，methods[key].bind(vm)，而如果使用使用箭头函数，函数的上下文就变成了父级的上下文，也就是undefined了，结果就是通过undefined访问任何变量都会报错。
使用keep-alive缓存后，增加activated和dedeactivated方法
使用keep-alive后
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter -->activated --> deactivated