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——表单应用范例
Feb 20 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
js转html实体的方法
2016/09/27 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
浅析matlab中imadjust函数
2020/02/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Java编程面试题
2016/04/04 面试题
铁路个人事迹材料
2014/01/30 职场文书
我的长生果教学反思
2014/04/28 职场文书
教师学期末个人总结
2015/02/13 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL