Article From:https://segmentfault.com/q/1010000011708721
Question:

This is an example of Vue’s life cycle.

I define A pages and B pages separately in routing.

APage:

<template>
  <div>
    <router-link to="/test2">Go to B page < /router-link>< /div>< /template>< script>Export default {BefOreCreate () {Console.log ('A page beforeCreate');},Created () {Console.log ('A page CRE)Ated');},Mounted () {Console.log ('A page mounted');},BeforeDestroy () {CoNsole.log ('A page beforeDestroy');},Destroyed () {Console.log ('A page destroyed');}}< /script>

Bpage

<template>
  <div>
    <router-link to="/test1">Go to A page < /router-link>< /div>< /template>< script>Export default {BefOreCreate () {Console.log ('B page beforeCreate');},Created () {Console.log ('B page CRE)Ated');},Mounted () {Console.log ('B page mounted');},BeforeDestroy () {CoNsole.log ('B page beforeDestroy');},Destroyed () {Console.log ('B page destroyed');}}< /script>

Why do we have such printing sequences?
Is the reason for Vue itself or the reason for loading Vue-router?

Answer 0:

Nothing wrong. When vue-router switches, the new component renders B-before Mounted before it is mounted, the old component destroys A-destroyed, and then mounts the new component B-mounted.

Leave a Reply

Your email address will not be published. Required fields are marked *