浅谈vue钩子函数

Vue-Router导航守卫：

1.全局守卫

1. router.beforeEach 全局前置守卫 进入路由之前
2. router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后

使用方法：

 // main.js 入口文件
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) => { 
      next();
    });
    router.beforeResolve((to, from, next) => {
      next();
    });
    router.afterEach((to, from) => {
      console.log('afterEach 全局后置钩子');
    });

2.路由独享守卫

可以为某些路由单独配置守卫

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          // 参数用法都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
          beforeEnter: (to, from, next) => { 
            //.....
          }
        }
      ]
    })

3.路由组件内的守卫

1. beforeRouteEnter 进入路由前
2. beforeRouteUpdate 路由复用同一个组件时
3. beforeRouteLeave 离开当前路由时

  beforeRouteEnter (to, from, next) {
    // 在路由独享守卫后调用 不能获取组件实例 `this`，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
  }

生命周期钩子

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

activated调用时机：

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用。
因为组件被缓存了，再次进入缓存路由/组件时，beforeCreate created beforeMount mounted 都不会触发。
deactivated调用时机：组件被停用(离开路由)时调用

使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

1. ajax请求最好放在created里面，因为此时已经可以访问this了，请求到数据就可以直接放在data里面。
2. 关于dom的操作要放在mounted里面，在mounted前面访问dom会是undefined。
3. 每次进入/离开组件都要做一些事情，用什么钩子：

• 不缓存：
  进入的时候可以用created和mounted钩子，离开的时候用beforeDestory和destroyed钩子,beforeDestory可以访问this，destroyed不可以访问this。

• 缓存了组件：
  缓存了组件之后，再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted，如果想每次进入组件都做一些事情的话，可以放在activated进入缓存组件的钩子中。

同理：离开缓存组件的时候，beforeDestroy和destroyed并不会触发，可以使用deactivated离开缓存组件的钩子来代替。