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关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python作用域与名字空间原理详解
2020/03/21 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python代码注释规范代码实例解析
2020/08/14 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
法律服务所工作总结
2015/08/10 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏