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 相关文章推荐
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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 include和require的区别深入解析
2013/06/17 PHP
Stop SQL Server
2007/06/21 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
jQuery实现三级联动效果
2017/03/02 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
代理班主任的自我评价
2014/02/04 职场文书
关于元旦的广播稿
2014/02/16 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
班主任新年寄语
2014/04/04 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
公司催款律师函
2015/05/27 职场文书
学习心理学心得体会
2016/01/22 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技