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 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
vue实现路由切换改变title功能
May 28 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
Js类的构建与继承案例详解
Sep 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
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
webpack file-loader和url-loader的区别
2019/01/15 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python 内置模块详解
2019/01/01 Python
numpy.where() 用法详解
2019/05/27 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Windows和Linux动态库应用异同
2016/07/28 面试题
UNIX文件系统分类
2014/11/11 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
清洁工表扬信
2014/01/08 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
python pyhs2 的安装操作
2021/04/07 Python