Vue 生命周期和路由守卫

- vue生命周期

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程

• beforeCreate：组件刚被创建，组件属性计算之前；

  this指向创建的实例；可以在这里添加loading事件；

  data computed watch methods上的方法和数据均不能访问

• created：组件实例创建完成，

  完成数据(data props computed)的初始化 导入依赖项。

  可访问data computed watch methods上的方法和数据

  未挂载DOM,不能访问ref为空数组

  可在这结束loading，还做一些初始化，实现函数自执行, 可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。

  若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中

• el属性：检查vue配置，即new vue{}里面的el是否存在，有就继续检查template项，没有则手动绑定调用vm.$mount（），

• beforeMount：模板编译，挂载之前，相关的render函数首次被调用

  有了el,编译了template|/outerHTML

  能找到对应的template,并编译成render函数

• mounted：编译、挂载，此时可以操作dom

  完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作

  即有了DOM 且完成了双向绑定 可访问DOM节点,$ref

  可在这发起后端请求，拿回数据，配合路由钩子做一些事情；

• beforeUpdate：组件更新之前。数据更新时调用，发生在虚拟dom重新渲染之前，可以在这一步中进一步更改状态

  可在更新前访问现有的DOM,如手动移除添加的事件监听器；

• updated：组件更新后

  可执行依赖的dom 操作

  注意：不要在此函数中操作数据，会陷入死循环的。

• activated：keep-alive组件激活时调用

  在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了， 如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发

• deactivated：keep-alive组件被移除时调用

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

  在执行app.$destroy()之前

  可做一些删除提示，如：你确认删除XX吗？

  可用于销毁定时器，解绑全局时间 销毁插件对象

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

  当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁
   这时组件已经没有了，你无法操作里面的任何东西了。

- 子父组件的生命周期

仅当子组件完成挂载后，父组件才会挂载 当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次） 父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的（可实践） 销毁父组件时，先将子组件销毁后才会销毁父组件

兄弟组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行 当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

- 路由守卫

全局守卫：

• router.beforeEach：当一个导航触发时，全局前置守卫按照创建顺序调用。

  一般在这个守卫方法中进行全局拦截，比如必须满足某种条件（用户登录等）才能进入路由的情况

• router.beforeResolve (v 2.5.0+)

  全局解析守卫

  和beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用 即在 beforeEach 和 组件内beforeRouteEnter 之后

  参数和beforeEach一致，也需要调用next对导航确认

• router.afterEach

  全局后置钩子 在所有路由跳转结束的时候调用 这些钩子不会接受 next 函数也不会改变导航本身

• beforeEnter

  可直接定义在路由配置上，和beforeEach方法参数、用法相同

组件内：

• beforeRouteEnter

  在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似，next需要被主动调用 注意：

  • 此时组件实例还未被创建，不能访问this

  • 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数

• beforeRouteUpdate：在当前路由改变，并且该组件被复用时调用，可以通过this访问实例， next需要被主动调用，不能传回调

• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例 this，next需要被主动调用，不能传回调