vue生命周期的作用
在每个执行阶段，给用户添加自己的机会
vue的生命周期有哪几个，在何时使用？
beforeCreate（实例创建前）
- 这个阶段，只有一些默认的生命周期钩子和默认事件，其它的东西还并未创建，DOM元素和数据还没有初始化，不能使用data的数据和methods里面的方法
- 可以在这里加个loading事件
created（实例创建后）
- data和methods都已经初始化好了，可以操作data里的数据和methods里的方法，但是DOM未被渲染
- 可以在这里结束loading，因为实例已经被初始化，这里可以拿数据，可以发起网络请求，发起网络请求最好在这个钩子
beforeMount(实例挂载前)
- DOM还没有挂载到vue实例上，数据初始化已经完成，数据的双向绑定还是{{}}，这是由于虚拟DOM。在内存中已经编译好了模板，但是还没有挂载到页面中，页面还是以前的页面
mounted(实例挂载后)
- 数据和DOM都已经被挂载，vue实例已经初始化完成了
- 可以进行DOM的操作
beforeUpdate（实例更新前）
- 只要是页面数据改变了就会触发，数据更新之前，页面的数据还是以前的数据，在赋值的时候会执行这个周期，如果数据不改变则不会执行
upDated(实例更新后)
- 此时页面的数据是最新的数据
beforeDestroy（实例销毁前）
- 这个阶段的data、指令等都是可用状态，还没有真正被销毁
- 可以添加事件确定要删除不？
destroyed（实例销毁后）
- 这个阶段，data和methods等都已经被销毁了
- 可以添加事件当前组件已被删除
vue生命周期的执行次序
单个实例
- beforecreate->created->beforeMount->mounted->beforeDestroy->destroyed
父子组件
- 父组件执行到beforeMount之后，向下执行，执行到子组件的beforeMount然后执行到子组件的mounted之后再执行父组件的mounted
多个组件
- 父组件执行到beforeMount之后，向下执行，执行到子组件的beforeMount然后执行到子组件的mounted之后再执行父组件的mounted
keep-alive中的生命周期
activated
- activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
- 调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给next的回调函数之前调用
- beforeMount-> 如果是从别的路由/组件进来（组件销毁destroyed/离开缓存deactivated）->mounted->activated进入缓存组件->执行beforeRouteEnter回调
- 由于组件被缓存了，所以created、beforeCreate、beforeMount、mounted都不会触发
- 之后的调用时机是：组件销毁/离开缓存deactivated->activated进入当前缓存组件->执行beforeRouteEnter回调
deactivated
- 组件被停用/离开路由时使用
- 使用keep-alive就不会调用beforeDestroy和destroyed这两个钩子，因为组件没有被销毁，而是被缓存起来了
- 组件销毁前想做的事情可以放在这个钩子里面
- 离开路由会依次触发:组件内的离开当前路由钩子beforeRouteLeave->路由前置守卫beforeEach->全局后置钩子afterEach->deactivated离开缓存组件->activated进入缓存组件（进入的是缓存路由）
- 离开的组件没有缓存beforeDestroy会替换deactivated
- 如果进入的路由也没有缓存的话，全局后置钩子afterEach->销毁destroyed->beforeCreate等
