虚拟企业生命周期探索

那么当进入某条路线对应的组件时，我们会触发什么样的循环呢？

根实例的加载相关生命周期(在创建、创建、安装、装载之前)全局路由钩子(路由器.在每个之前)组件路由钩子(在路由钩子之前)组件路由钩子的下一个指令的周期(绑定、插入)。接下来，让我们使用vue-cli简单地修改项目，并做一个测试，看看每个声明周期的触发序列是什么。

main.js:

Router .在每个之前((to，from，next)={console.log('路由全局刻度：在每个之前')next ()}) router .在每个之后((to，From)={console.log('路由全局刻度：在每个之后')})new vue({ before create(){ console . log('根组件：beforecreate')})，created () {console.log('根组件：created')}，BeforeMount () {console.log('根组件：mount')}，mounted () {console.log('根组件：mounted ')} El 33333

模板h1 v-ooo @ click=' $ router . push('/')' test/h1/templatescript export default { BeforeRouter(to，from，Next) {console.log('组件路由钩子：before router ')Next(VM={ console . log('组件路由钩子的下一个，beforerouter')})}，beforcreate(){ console . log('组件：before create')}，created () {this。$ Next tick(()={ console . log(' Next tick ')})console . log(' component:created ')}，before mount(){ console . log(' component:before mount ')}，mounted(){ console . log(' component:mounted ')}，directives : { ooo 3360 { bind(El，binding，Vnode){ console . log(' instruled binding ')}，insert(El，binding，Vnode){ console . log(' instruded ' } }/script Next，直接输入与测试对应的路由。

我们看到执行的顺序是

路由挂钩(在每个之前、在路由器之前、在每个之后)根组件(在创建之前、创建之前、安装之前)组件(在创建之前、创建之前、安装之前)指令(绑定、插入)组件安装的根组件安装在路由器的下一次回调之前下一个结束

路由挂钩的执行周期非常早，甚至在根实例呈现之前

具体顺序是路由器。在每个beforerouter路由器之前。每次之后

Tip:拦截路由时，避免在实例内部使用方法或属性。开发项目的时候，我们拍脑袋，具体截取的程序写在根实例的方法上，调用beforeEach。因此，整个截取周期被推迟到实例渲染之后。因此，对于某些路由组件来说，beforeRouteEnter中的请求无法被拦截，页面似乎被拦截了。事实上，请求仍然会被发送出去，beforeRouteEnter中的函数仍然会被执行。

该指令在组件装入之前被绑定，在组件装入之前，它必须被提及，即beforeRouteEnter的下一个钩子。

beforeRouteEnter的执行顺序那么高，下一个回调钩子的功能很低，挂载后！我们通常会在beforeRouteEnter中为第一个屏幕加载一些数据。收到数据后，我们调用下一个钩子，并通过回调参数vm将数据绑定到实例。因此，请注意，下一个的钩子非常靠后。

下一个滴答注册得越早，下一个滴答触发得越早

以上是边肖介绍的vue生命周期的探索、详解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！