Shulou(Shulou.com)05/31 Report--

This article focuses on "what is the life cycle of vue?". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the life cycle of vue?"

Life cycle related to the loading of the root instance (beforeCreate, created, beforeMount, mounted)

Lifecycle related to loading of component instances (beforeCreate, created, beforeMount, mounted)

Global routing Hook (router.beforeEach)

Component routing hook (beforeRouteEnter)

Callback (beforeRouteEnter) in next of component routing hook

Cycle of instructions (bind,inserted)

Callback of nextTick method

Next, let's use the simple modified project of vue-cli to do a test to see what the trigger sequence of each declaration cycle is.

Main.js:

Router.beforeEach ((to, from, next) = > {console.log ('routing global hook: beforeEach') next ()}) router.afterEach ((to, from) = > {console.log (' routing global hook: afterEach')}) new Vue ({beforeCreate () {console.log ('root component: beforeCreate')}, created () {console.log (' root component: created')}, beforeMount () {console.log ('root component: beforeMount')} Mounted () {console.log ('root component: mounted')} el:' # app', router, template:', components: {App}})

Test.vue

Testexport default {beforeRouteEnter (to, from, next) {console.log ('component routing hook: beforeRouteEnter') next (vm = > {console.log (' component routing hook beforeRouteEnter next')})}, beforeCreate () {console.log ('component: beforeCreate')}, created () {this.$nextTick (() = > {console.log (' nextTick')}) console.log ('component: created')} BeforeMount () {console.log ('component: beforeMount')}, mounted () {console.log (' component: mounted')}, directives: {ooo: {bind (el, binding, vnode) {console.log ('binding')}, inserted (el, binding, vnode) {console.log (' instruction inserted')}

Next, go directly to the route corresponding to test.vue. On the console, we see the following output

We see that the order of execution is

Routing Hook (beforeEach, beforeRouteEnter, afterEach)

Root components (beforeCreate, created, beforeMount)

Components (beforeCreate, created, beforeMount)

Instructions (bind, inserted)

Component mounted

Root component mounted

Callback of beforeRouteEnter's next

NextTick

Conclusion

The routing hook executes very early, even before the rendering of the root instance

Specific order router.beforeEach > beforeRouteEnter > router.afterEach

Tip: avoid using methods or properties inside the instance when intercepting routes.

During the development of the project, we took a pat on the forehead, and the specific interception program was written on the method of the root instance, and went to beforeEach to call.

As a result, the entire intercept cycle is delayed until after the instance is rendered.

So requests in the beforeRouteEnter of some routing components cannot be intercepted, and the page looks as if it has been intercepted.

In fact, the request is still sent, and the functions in beforeRouteEnter are still executed.

The instruction is bound before the component mounted and after the component beforeMount

I have to mention, beforeRouteEnter's next hook

The execution order of beforeRouteEnter is so high, and the function of callback hook of next is very backward, after mounted!

We usually load some data for the first screen in beforeRouteEnter, and then call the next hook after the data is received, and bind the data to the instance through the callback parameter vm.

Therefore, please note that the hook of next is very low.

NextTick

The earlier the nextTick is registered, the sooner it triggers.

At this point, I believe you have a deeper understanding of "what is the life cycle of vue"? you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.