vue生命周期探究(二)
vue生命周期探究(二)
转载自:https://segmentfault.com/a/1190000008923105
上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue-cli项目中,各个勾子的顺序是如何的吧。主要聚焦在页面加载的这条时间线。
页面加载的时候,vue生命周期的触发顺序是怎样的呢?
那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢?
根实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
全局路由勾子(router.beforeEach)
组件路由勾子(beforeRouteEnter)
组件路由勾子的next里的回调(beforeRouteEnter)
指令的周期(bind,inserted)
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对应的路由。在控制台,我们看到如下的输出
我们看到执行的顺序为
路由勾子 (beforeEach、beforeRouteEnter、afterEach)
根组件 (beforeCreate、created、beforeMount)
组件 (beforeCreate、created、beforeMount)
指令 (bind、inserted)
组件 mounted
根组件 mounted
beforeRouteEnter的next的回调
nextTick
结论
路由勾子执行周期非常早,甚至在根实例的渲染之前
具体的顺序 router.beforeEach > beforeRouteEnter > router.afterEach
tip:在进行路由拦截的时候要避免使用实例内部的方法或属性。
在开发项目时候,我们脑门一拍把,具体拦截的程序,写在了根实例的方法上了,到beforeEach去调用。
结果导致整个拦截的周期,推迟到实例渲染的之后。
因此对于一些路由组件的beforeRouteEnter里的请求并无法拦截,页面看上去好像已经拦截下来了。
实际上请求依然发了出去,beforeRouteEnter内的函数依然执行了。
指令的绑定在组件mounted之前,组件的beforeMount之后
不得不提的, beforeRouteEnter的next勾子
beforeRouteEnter的执行顺序是如此靠前,而其中next的回调勾子的函数,执行则非常靠后,在mounted之后!!
我们通常是在beforeRouteEnter中加载一些首屏用数据,待数据收到后,再调用next勾子,通过回调的参数vm将数据绑定到实例上。
因此,请注意next的勾子是非常靠后的。
nextTick
越早注册的nextTick触发越早
vue生命周期探究(二)的更多相关文章
- vue生命周期探究(一)
前言 在使用vue开发的过程中,我们经常会接触到生命周期的问题.那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下: 根组件实例:8个 (beforeCreate.cr ...
- Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Vue生命周期简介和钩子函数
钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字.或者说你想在出生阶段去约炮,也是不行的.组件也是一样,每个阶段它的内部构造是不一样的.所以一般 ...
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- Vue生命周期,面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- VUE自定义指令生命周期,VUE生命周期
一.自定义指令的生命周期 自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次,指令第一次绑 ...
随机推荐
- 事务基础知识-->Spring事务管理
Spring虽然提供了灵活方便的事务管理功能,但这些功能都是基于底层数据库本身的事务处理机制工作的.要深入了解Spring的事务管理和配置,有必要先对数据库事务的基础知识进行学习. 何为数据库事务 “ ...
- xdebug常用配置
;指定xdebug文件 zend_extension = "F:\tools\develop_tools\php\php_xdebug-2.2.2-5.4-vc9.dll" ;xd ...
- 复习及总结--.Net线程篇(4)
这里要说的就是多线程的锁的问题了 锁:作用在于实现线程间的同步问题,最典型的是售票问题 1,InterLocked 提供的都是静态方法,用来同步对多个共享变量的访问,包括以原子方式递增,递减,比较和替 ...
- ubuntu 12.04中环境变量设置
Persistent environment variables So far we've only discussed ways set an environment variable value ...
- git练习
git commit 提交记录 git branch <branch_name> 建立名为branch_name的分支 git checkout <name>:git comm ...
- 如何把IOS应用,发给别人测试?
ios应用,除了用XCODE连接真实设备调试以外,也可以制作ipa安包,发给别人测试.下面是具体步骤: 1. 把要测试的设备标识添加到你苹果开发账号的调试设备里.(可以用xcode或者itools查看 ...
- 1855: [Scoi2010]股票交易[单调队列优化DP]
1855: [Scoi2010]股票交易 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1083 Solved: 519[Submit][Status] ...
- ios 如何对UITableView中的内容进行排序
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSI ...
- 常用 Git 操作
最新博客链接:https://feiffy.cc/Git 日常用到的GIT的一些操作,记下来,以备参考. 删除文件 git rm filename git commit -m "remove ...
- DNS服务简介
一.域名系统 1.域名系统概述 域名系统DNS(Domain Name System)是因特网使用的命名系统,用来把便于人们使用的机器名字转换成为IP地址.域名系统其实就是名字系统.为什么不叫“名字” ...