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 相关文章推荐
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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目录导航文件代码
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
JavaScript 原型继承
2011/12/26 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
中学教师暑期培训方案
2014/08/27 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
六查六看剖析材料
2014/10/06 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
厉行节约工作总结
2015/08/12 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS