problem description

VueIView, (Modal) A A  B B  A  mounted !!!

various dependency information in the project

• the following is the package.json configuration class capacity

{
  "name": "test4",
  "version": "1.0.0",
  "description": "webpack test",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --config config.js --content-base dist/ --port 8080 --color --hot --inline ",
    "build": "webpack --config config.js --progress --display-modules --display-reasons --colors",
    "auto-build": "webpack --config config.js --progress --colors --watch"
  },
  "keywords": [
    "webpack",
    "test"
  ],
  "author": "yangxiuchu",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "compression-webpack-plugin": "^1.0.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file": "^0.2.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "url": "^0.11.0",
    "url-loader": "^0.6.2",
    "vee-validate": "^2.1.3",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.5",
    "webpack": "^3.8.0",
    "webpack-dev-server": "^2.9.2"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "bootstrap": "^3.3.7",
    "echarts": "^4.1.0",
    "iview": "^3.1.5",
    "jquery": "^3.2.1",
    "moment": "^2.22.2",
    "toastr": "^2.1.2",
    "underscore": "^1.9.1",
    "vue": "^2.5.5",
    "vue-axios": "^2.0.2",
    "vuex": "^3.0.1",
    "ztree": "^3.5.24"
  }
}

related codes

the related code is as follows:

• A component related code

<style scoped>
...
</style>
<template>      
       ...
        <!--
             currentView 
             <router-view>  currentView  key 
             this.key = new Date().getTime();  detail  
        -->
        <button @click="detail("dynamoDetail")">clike me</button>
        <router-view :name="currentView" :key="key"></router-view>
    </Layout>
</template>
<script>
    export default {
        data() {
            return {
                currentView : "",
                key : ""
            }
        },
        watch : {
        },
        created() {

        },
        mounted() {
            // 
            this.$router.push({name : "dynamic-power-systme-detail"});
        },
        beforeDestroy() {
        },
        methods: {
            detail(target) {
                //  key,  <router-view>
                this.key = new Date().getTime();
                if(target !== this.currentView) {
                    this.currentView = target;
                }
                console.log("key is updated...");
            }
        }
    }
</script>

• corresponding route definition

...
 {
    path : "dynamic-oil-electric-system-index",
    name : "dynamic-oil-electric-system-index",
    component : (resolve) => require(["./monitor/dynamicSystem/oilElectricSystem/index.vue"], resolve),
    children : [
        {
            path : "detail",
            name : "dynamic-oil-electric-system-detail",
            components : {
                "pressureGaugeDetail" : (resolve) => require(["./monitor/dynamicSystem/oilElectricSystem/pressureGaugeDetail.vue"], resolve)
            }
        }
        
    ]
}
...

• B component is defined as follows

<style scoped>
...
</style>

<template>
    <Layout>
        <Modal
            :value="show"
            @on-visible-change="change"
            title="foo"
            :styles="{width: "50%", verticalAlign: "center", marginTop: "5%"}">
            <div class="tz-table-wrapper">
                <Table :columns="cols" :data="rows"></Table>
            </div>
            <span slot="footer">
                {{new Date().getTime()}}
            </span>
        </Modal>
    </Layout>
</template>
<script>
    export default {
        data() {
            return {
                show : true,
                cols : [
                        {title : "", key : "id"},
                        {title : "", key : "name"},
                        {title : "", key : "content"}
                    ],
                rows : []
            }
        },
        created() {
            console.log("dynamoDetail Component created...");
        },
        updated() {
            console.log("dynamoDetail Component updated...");
        },
        mounted() {
            console.log("dynamoDetail Component mounted...");
        },
        destroyed() {
            console.log("dynamoDetail Component destoryed...");
        },
        methods: {
            ok() {
            },
            cancel() {
            },
            change(state) {
                this.show = state;
            }
        }
    }
</script>

this component is a child of component An and is defined as named routing

actual situation description

in the A component page, click the button, and the component to which the B named route matches will pop up a modal box, and this is also the case, but after I close the modal box, click the button on the A component page again but can not pop up the modal box, printing the life cycle, the output is as follows:

// 
key is updated...
dynamoDetail Component created...
dynamoDetail Component mounted...
// 
dynamoDetail Component updated...
// ,  Vue !!!???
// ? ?
//  dom !!!???
key is updated...
dynamoDetail Component created...
dynamoDetail Component destoryed...
dynamoDetail Component mounted...
// 

solution

• modify component B code as follows:

<style scoped>
...
</style>

<template>
    <!--
         HTML  div, span, 
        
    -->
    <Layout>
        <Modal
            :value="show"
            @on-visible-change="change"
            title="foo"
            :styles="{width: "50%", verticalAlign: "center", marginTop: "5%"}">
            <div class="tz-table-wrapper">
                <Table :columns="cols" :data="rows"></Table>
            </div>
            <span slot="footer">
                {{new Date().getTime()}}
            </span>
        </Modal>
    </Layout>
</template>
<script>
    export default {
        data() {
            return {
                show : true,
                cols : [
                        {title : "", key : "id"},
                        {title : "", key : "name"},
                        {title : "", key : "content"}
                    ],
                rows : []
            }
        },
        created() {
            console.log("dynamoDetail Component created...");
        },
        updated() {
            console.log("dynamoDetail Component updated...");
        },
        mounted() {
            console.log("dynamoDetail Component mounted...");
        },
        destroyed() {
            console.log("dynamoDetail Component destoryed...");
        },
        methods: {
            ok() {
            },
            cancel() {
            },
            change(state) {
                this.show = state;
            }
        }
    }
</script>

questions

1. The normal life cycle of Vue components is brforeCreaded-> created-> mounted-> [beforeUpdated-> updated]-> beforeDestoryed-> destoryed, but why is the order of created-> destoryed-> updated in the above problems and the order of calls in the solution the same?
2. Why do the above problems occur and can be solved with the above solutions? Is it the IView Modal component itself?