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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python 多线程重启方法
2019/02/18 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
社区综治宣传月活动总结
2014/07/02 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
详解Python牛顿插值法
2021/05/11 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
python文件与路径操作神器 pathlib
2022/04/01 Python
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS