beforeCreate
1 .实例初始化之后
2 .this指向创建的实例
3 .数据观测,event/watcher配置尚未完成
4 .不能访问到methods,data,computed,watch上的方法和数据
5 .console.log(this),上面说的这些是都能打印出来的,但是访问不到
created
1 .实例创建完成
2 .数据观测,属性和方法的运算,watch/event事件的回调
3 .可以调用methods中定义的方法,修改data的数据
4 .触发响应式变化
5 .computed值重新计算
6 .watch等变更的监测
7 .进行ajax请求,并对实例进行初始化预处理
8 .在vue-router中,进入created生命周期阶段之后无法对挂载实例进行拦截的,此时实例已经创建完成。如果需要某些数据获取完成才允许进入页面的场景,建议在路由钩子beforeRouterEnter中实现
9 .还未挂在到DOM,不能访问el属性,ref属性内容为空
beforeMount
1 .在挂载之前被调用
2 .寻找对应的template,并编译成render函数,如果指定了render函数,直接采用render函数,则会直接使用
3 .如果没有el属性,生命周期暂停,等待vm.$mount(el)调用才继续
mounted
1 .实例挂载到dom上,此时可以通过DOM api获取到DOM节点,$ref属性可以访问
2 .mounted不会承诺所有子组件也一起被挂载,如果需要定位到整个视图都被渲染完毕,可以使用vm.$nextTick
3 .
beforeUpdate
1 .这里更新的对象是模板,即虚拟dom重新渲染和打补丁,发生在以上两个流程之间
2 .生成新的虚拟dom
3 .如果发生变更的数据没有被使用,是不会触发更新流程的
4 .避免在这个函数内进行数据操作,可能会引起死循环,this.a++
updated
1 .由于数据更改导致的虚拟dom重新渲染和打补丁,在这歌之后会调用这个钩子
2 .此时组件dom已经更新,可以执行依赖于DOM的操作
3 .避免在这个函数中操作数据
beforeDestory
1 .实例销毁之前调用,实例仍然完全可用,this仍然可以获取到实例
2 .销毁定时器,解绑全局事件,销毁插件对象
destoryed
1 .销毁之后调用,所有的东西都会解绑,所有的事件监视器都会被移除,子实例也会被销毁
2 .
思考
1 .嵌套组件之间的生命周期函数怎么触发
2 .
路由守卫
router,beforeEach
1 .全局前置守卫
2 .进行全局拦截,比如必须满足某种条件(用户登录)才能进去路由
3 .
beforeRouteEnter
1 .在路由组件进入的时候触发
2 .此时组件实例还未被创建,不能访问this
3 .但是可以传一个回调给next来访问组件实例。在导航被确认的时候执行回调,并把组件实例作为回掉方法的参数
4 .可以在这里请求服务端数据,当成功获取并能进入路由时,调用next并在vm中访问组件实例进行赋值等操作
5 .next函数的调用在mounted之后,为了能保证对组件实例的完整访问
6 .
beforeRouteUpdate
1 .当前路由改变,并且该组件被复用时调用
2 .
beforeRouteLeave
1 .导航离开该组件的对应路由时调用,可以访问组件根实例this,next需要主动调用,不能传回调
2 .用户未保存草稿的时候,用户离开时,将setInterval销毁,防止离开之后,定时器还在调用
3 .
keep-alive
1 .缓存路由组件,将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件
2 .
activated
1 .在组件第一次渲染时被调用,之后每次缓存组件被激活时调用
2 .第一次进入缓存路由时候的钩子函数调用情况
1 .beforeMount
2 .如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)
3.mounted
4.activated 进入缓存组件
5. 执行 beforeRouteEnter回调
3 .由于组件被缓存,再次进入缓存路由/组件的时候,这些不会触发
1 .beforeMount
2 .created
3 .beforeMounte
4 .mounted
4 .之后触发的是这些函数
1 .组件销毁destoryed/或离开缓存deactivated
2 .actived 进入当前缓存组件
3 .执行beforeRouter回调
4 .组件缓存或者销毁,嵌套组件的销毁和缓存也在这里触发
5 .缓存了组件之后,如果想进入组件都做一些事情的话,可以放在activated进入钩子中去
activated:组件被停用(离开路由)时调用
1 .使用keep-alive就不会调用beforeDestory和destory,因为组件没被销毁,被缓存起来了
2 .这个钩子可以被看作时beforeDestory的替代,如果你缓存了组件,要在组件销毁的时候做一些事,你可以放在这个钩子里面
3 .这个时候离开路由触发的钩子函数
1 .beforeRouteLeave
2 .beforeEach 路由前置守卫
3 .afterEach 全局后置钩子
4 .deactived 离开缓存组件
5 .activated 进入缓存组件
6 .如果离开的组件没有缓存的话 beforeDestory会替换deactivated
7 .离开的时候必然触发的钩子函数事deactivated缓存钩子来替代
异步组件中的生命周期函数
1 .mounted函数只无法获取子组件的实例
2 .可以模拟注入函数
3 .