Vue2.0生命周期及路由导航守卫

Vue的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了

1.Vue生命周期的相关图片

2.Vue生命周期及路由的钩子函数

• beforeCreate

实例初始化之后，初始化注入(init injections)及响应(reactivity)前被调用

• created

实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined
这里要视情况来定，根据你的业务来判断是否可以在这里进行ajax请求

• beforeMounted

在这里之前会根据是否有el元素及是否有内置的template模板来进行选择
没有el则在vm.mounted(el)调用之后再往下执行，没有内置的模板则使用外层的template模板
模板编译、挂载之前，此时$el还是undefined

• mounted

实例挂载到页面上，此时可以访问$el

• beforeDestroy

在组件销毁之前调用，这里依然可以访问$el
这里可以做一些重置的操作，比如清除掉组件中的 定时器 和 监听的dom事件

• destroy

组件销毁

路由导航守卫

要调用next()不然页面会卡在中途

• beforeRouteEnter

路由进入的时候调用，在组件beforeCreate前
此时还没有组件实例，this为undefined，组件实例还没有被创建
beforeRouteEnter 是支持给 next 传递回调的唯一守卫
对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调

• beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用
对于一个带有动态参数的路径 /index/:id，在 /index/1 和 /index/2 之间跳转的时候
由于会渲染同样的 Index 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用

• beforeRouteLeave

离开守卫通常用来禁止用户在还未保存修改前突然离开,该导航可以通过 next(false) 来取消

3.示例代码

• 我这里是用了webpack打包来做的，并没有用new Vue来新建

<script>
  export default {
    data() {
      return {
        time: ''
      }
    },
    beforeCreate() {
      console.log('beforeCreate: 生命周期之beforeCreate');
      console.log(this.$el);
    },
    created() {
      /* 实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined */
      console.log('created: 生命周期之created')
      console.log(this.$el);
      /*
       * route是一个跳转的路由对象
       * 每一个路由都会有一个route对象，是一个局部的对象
       * 可以获取对应的name,path,params,query等
       * */
      console.log(this.$route);

      /*
       * $router是VueRouter的一个对象
       * 通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象
       * 这个对象是一个全局的对象，他包含了所有的路由
       * */
      console.log(this.$router);
    },
    beforeMount() {
      console.log('beforeMount: 生命周期之beforeMount');
      console.log(this.$el);
    },
    mounted() {
      console.log('mounted: 生命周期之mounted');
      console.log(this.$el);
      this.time = '2018';
    },
    /* 路由的生命周期 */
    beforeRouteEnter(to, from, next) {
      /*
       * 此时还没有组件实例，this为undefined，组件实例还没有被创建
       * beforeRouteEnter 是支持给 next 传递回调的唯一守卫
       * 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调
       *
       * */
      console.log('beforeRouteEnter: 进入路由');
      /* 在这里用this无法获取vue实例，但可以在next()回调里访问组件实例 */
      console.log(this);
      /*
       * 要调用next()方法
       * next()进行管道中的下一个钩子
       * 如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
       * */
      // next();

      /* next()回调里访问组件实例 */
      next(vm => {
        /* 这里的打印是在mounted之后 */
        console.log(vm);
      })
    },
    beforeRouteUpdate(to, from, next) {
      console.log('beforeRouteUpdate: 路由更新');
      console.log(this.$route);
      next();
    },
    beforeRouteLeave(to, from, next) {
      /*
      * 离开守卫通常用来禁止用户在还未保存修改前突然离开
      * 该导航可以通过 next(false) 来取消
      * 使用next(false)，页面依然停留在当前页面，组件的beforeDestroy和destroy生命周期不执行
      * */
      console.log('beforeRouteLeave: 离开该组件对应的路由');
      console.log(this.$route);
      next();
      // next(false);
    },
    beforeUpdate() {
      console.log('beforeUpdate: 生命周期之beforeUpdate');
      console.log(this.$el);
    },
    updated() {
      console.log('updated: 生命周期之updated');
      console.log(this.$el);
    },
    beforeDestroy() {
      /* 这里做一些重置的操作，比如清除掉组件中的 定时器 和 监听的dom事件 */
      console.log('beforeDestroy: 生命周期之beforeDestroy');
      console.log(this.$el);
    },
    destroyed() {
      console.log('destroy: 生命周期之destroy');
      console.log(this.$el);
    }
  }
</script>

输出图片

• 路由为/routerIndex时

• 当组件被复用时，路由为/routerIndex?id=1

离开当前路由时

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期好文推荐：

  • 判断iOS和Android及PC端
  • 纯css实现瀑布流（multi-column多列及flex布局）
  • 实现单行及多行文字超出后加省略号
  • 微信小程序之购物车和父子组件传值及calc的注意事项