Vue组件和Route的生命周期实例详解


Posted in Javascript onFebruary 10, 2018

先讲点实际的

实用点的钩子:

Created:vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);
beforeCreate:给个loading界面 created撤销loading;
beforeDestory:你确认删除XX吗?
destoryed:当前组件已被删除,清空相关内容

关于Vue组件生命周期,翻译后图示:

Vue组件和Route的生命周期实例详解

module.exports = { 
    //props: ['父组建传的值'], 
    data:function(){ 
      lifecycle.push("data"); 
      return { 
        msg: '各个阶段,可以查看控制台输出,message from my-views', 
        title:'my_views', 
        lifecycle: lifecycle 
      } 
    }, 
    //这里是route的生存周期 
    route:{ 
      //waitForData: true, // 数据加载完毕后再切换试图,也就是 点击之后先没反应,然后数据加载完,再出发过渡效果 
      canActivate:function(transition){ 
        // canActivate阶段,可以做一些用户验证的事情(是否可以被激活) 
        // 在验证阶段,当一个组件将要被切入的时候被调用。 
      }, 
      activate:function(transition){ 
                // 在激活阶段被调用,在 activate 被断定( resolved ,指该函数返回的 promise 被 resolve )。用于加载和设置当前组件的数据。(激活) 
        //this.$root.$set('header',this.title); 
        transition.next(); 
        //此方法结束后,api会调用afterActivate 方法 
        //在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true 
      }, 
      data: function(transition) { 
        var _this = this; 
        // 在激活阶段被调用,在 activate 被断定( resolved ,指该函数返回的 promise 被 resolve )。用于加载和设置当前组件的数据 
        // 说明之前请求过 则不用再请求了 
        if(this.$root.myViewsData){ 
          this.$data = this.$root.myViewsData; 
          transition.next(); 
          console.log('已经请求过了不再请求数据'); 
          return; 
        } 
        //将数据同步到根节点 
        this.$root.myViewsData = this.$data; 
        setTimeout(function(){ 
          //这里 _this.$loadingRouteData 是 true 
          transition.next({msg:'加载后的数据'}); 
          //在调用完transition.next 后,_this.$loadingRouteData 为 false 
        }.bind(this),4000); 
      }, 
      canDeactivate:function(transition){ 
        // 在验证阶段,当一个组件将要被切出的时候被调用。(是否可以被禁用) 
      }, 
      deactivate: function (transition) { 
        // 在激活阶段,当一个组件将要被禁用和移除之时被调用。(禁用) 
      } 
    }, 
    beforeCreate:function(){ 
      // 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 
    }, 
    created:function(){ 
      // 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 
    }, 
    beforeCreate:function(){ 
      // 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 
    }, 
    mounted:function(){ 
      // el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。 
    }, 
    beforeUpdate: function(){ 
      // 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。  
      // 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。 
    }, 
    updated: function(){ 
      // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 
      //当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 
    }, 
    // <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 
    activated: function(){ 
      // keep-alive 组件激活时调用。 
    }, 
    deactivated: function(){ 
      // keep-alive 组件停用时调用。 
    }, 
    beforeDestroy:function(){ 
      // 实例销毁之前调用。在这一步,实例仍然完全可用。 
    }, 
    destroyed:function(){ 
      // Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 
    } 
  }

总结

以上所述是小编给大家介绍的Vue组件和Route的生命周期详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 #Javascript
vue.js 微信支付前端代码分享
Feb 10 #Javascript
详解如何实现一个简单的 vuex
Feb 10 #Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 #Javascript
使用 vue.js 构建大型单页应用
Feb 10 #Javascript
javascript中的隐式调用
Feb 10 #Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 #Javascript
You might like
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python 连连看连接算法
2008/11/22 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
基于python的字节编译详解
2017/09/20 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
求职推荐信
2013/10/28 职场文书
大型车展策划方案
2014/02/01 职场文书
大学生学习计划书
2014/09/15 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
终止劳动合同协议书
2014/10/05 职场文书
教师节晚会主持词
2015/06/30 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python