vue生命周期的探索


Posted in Javascript onApril 03, 2019

那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢?

  1. 根实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
  2. 组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
  3. 全局路由勾子(router.beforeEach)
  4. 组件路由勾子(beforeRouteEnter)
  5. 组件路由勾子的next里的回调(beforeRouteEnter)
  6. 指令的周期(bind,inserted)
  7. nextTick方法的回调

接下来,让我们用vue-cli简单改造后的项目,做一个测试,看看各个声明周期的触发顺序是怎样的

main.js:

router.beforeEach((to, from, next) => {
 console.log('路由全局勾子:beforeEach')
 next()
})
 
router.afterEach((to, from) => {
 console.log('路由全局勾子:afterEach')
})
 
new Vue({
 beforeCreate () {
  console.log('根组件:beforeCreate')
 },
 created () {
  console.log('根组件:created')
 },
 beforeMount () {
  console.log('根组件:beforeMount')
 },
 mounted () {
  console.log('根组件:mounted')
 }
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

test.vue

<template>
 <h1 v-ooo @click = "$router.push('/')">test</h1>
</template>
<script>
export default {
 beforeRouteEnter (to, from, next) {
  console.log('组件路由勾子:beforeRouteEnter')
  next(vm => {
   console.log('组件路由勾子beforeRouteEnter的next')
  })
 },
 beforeCreate () {
  console.log('组件:beforeCreate')
 },
 created () {
  this.$nextTick(() => {
   console.log('nextTick')
  })
  console.log('组件:created')
 },
 beforeMount () {
  console.log('组件:beforeMount')
 },
 mounted () {
  console.log('组件:mounted')
 },
 directives: {
  ooo: {
   bind (el, binding, vnode) {
    console.log('指令binding')
   },
   inserted (el, binding, vnode) {
    console.log('指令inserted')
   }
  }
 }
}
</script>

接下来,直接进入test.vue对应的路由。在控制台,我们看到如下的输出

vue生命周期的探索

我们看到执行的顺序为

  1. 路由勾子 (beforeEach、beforeRouteEnter、afterEach)
  2. 根组件 (beforeCreate、created、beforeMount)
  3. 组件 (beforeCreate、created、beforeMount)
  4. 指令 (bind、inserted)
  5. 组件 mounted
  6. 根组件 mounted
  7. beforeRouteEnter的next的回调
  8. nextTick

结论

路由勾子执行周期非常早,甚至在根实例的渲染之前

具体的顺序 router.beforeEach > beforeRouteEnter > router.afterEach

tip:在进行路由拦截的时候要避免使用实例内部的方法或属性。
在开发项目时候,我们脑门一拍把,具体拦截的程序,写在了根实例的方法上了,到beforeEach去调用。
结果导致整个拦截的周期,推迟到实例渲染的之后。
因此对于一些路由组件的beforeRouteEnter里的请求并无法拦截,页面看上去好像已经拦截下来了。
实际上请求依然发了出去,beforeRouteEnter内的函数依然执行了。

指令的绑定在组件mounted之前,组件的beforeMount之后
不得不提的, beforeRouteEnter的next勾子

beforeRouteEnter的执行顺序是如此靠前,而其中next的回调勾子的函数,执行则非常靠后,在mounted之后!!
我们通常是在beforeRouteEnter中加载一些首屏用数据,待数据收到后,再调用next勾子,通过回调的参数vm将数据绑定到实例上。
因此,请注意next的勾子是非常靠后的。

nextTick
越早注册的nextTick触发越早

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

Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 #Javascript
详释JavaScript执行环境与执行栈
Apr 02 #Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 #Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 #Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 #Javascript
Seajs源码详解分析
Apr 02 #Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 #Javascript
You might like
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS验证不重复验证码
2017/02/10 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
文明学生事迹材料
2014/01/29 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
flex弹性布局详解
2022/03/20 HTML / CSS