vue 父子组件的生命周期

1 综述

• 1 总结：vue 父子组件的生命周期的过程
  • 1.1 init的时候的生命周期的过程
    • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 1.2 update的时候的生命周期的过程
    • 子组件update的时候 子beforeUpdate->子updated
    • 父组件update的时候 父beforeUpdate->父updated
  • 1.3 destroyed的时候的生命周期的过程
    - 父beforeDestroy->子beforeDestroy ->子destroyed->父destroyed

代码验证

lifeCycle.vue(parent)

<template>
<div id="lifeCycle">
    <div>
        parent
    </div>
    <div>
        <span>parent count</span>{{count}}
    </div>
    <div>
        <button @click="handleClick">click add parent </button>
    </div>
    <div class="child">
        <child></child>
    </div>
</div>
</template>
<script>
import child from "./components/child";

export default {
    name: "lifeCycle",
    data: function() {
        return {
            count: 2
        };
    },
    methods: {
        handleClick() {
            this.count++;
        }
    },
    components: {
        child
    },
    beforeCreate() {
        console.log("parent BeforeCreated");
    },
    created() {
        console.log("parent created");
    },
    beforeMount() {
        console.log("parent beforeMounted");
    },
    mounted() {
        console.log("parent mounted");
    },
    beforeUpdate() {
        console.log("parent beforeUpdate");
    },
    updated() {
        console.log("parent updated");
    },
    beforeDestroy() {
        console.log("parent beforeDestroy");
    },
    destroyed() {
        console.log("parent destroyed");
    }
};
</script>
<style lang="scss">
</style>

child.vue

<template>
<div>
    <p>child</p>
    <div>
        {{count}}
    </div>
    <div>
        <button @click="handleClick">click add</button>
    </div>
    <div class="grandChild">
        <grandChild></grandChild>
    </div>
</div>
    
</template>

<script>
import grandChild from "./grandChild";
export default {
    name: "child",
    data: function() {
        return {
            count: 1
        };
    },
    methods: {
        handleClick() {
            this.count++;
        }
    },
    components: {
        grandChild
    },
    beforeCreate() {
        console.log("child BeforeCreated");
    },
    created() {
        console.log("child created");
    },
    beforeMount() {
        console.log("child beforeMounted");
    },
    mounted() {
        console.log("child mounted");
    },
    beforeUpdate() {
        console.log("child beforeUpdate");
    },
    updated() {
        console.log("child updated");
    },
    beforeDestroy() {
        console.log("child beforeDestroy");
    },
    destroyed() {
        console.log("child destroyed");
    }
};
</script>

<style>
</style>

grandChild.vue

<template>
<div>
    <p>child</p>
    <div>
        {{count}}
    </div>
    <div>
        <button @click="handleClick"> grandChild click add</button>
    </div>
</div>
    
</template>

<script>
export default {
    name: "grandChild",
    data: function() {
        return {
            count: 1
        };
    },
    methods: {
        handleClick() {
            this.count++;
        }
    },
    beforeCreate() {
        console.log("grandChild BeforeCreated");
    },
    created() {
        console.log("grandChild created");
    },
    beforeMount() {
        console.log("grandChild beforeMounted");
    },
    mounted() {
        console.log("grandChild mounted");
    },
    beforeUpdate() {
        console.log("grandChild beforeUpdate");
    },
    updated() {
        console.log("grandChild updated");
    },
    beforeDestroy() {
        console.log("grandChild beforeDestroy");
    },
    destroyed() {
        console.log("grandChild destroyed");
    }
};
</script>

<style>
</style>

运行结果

1.png 2.png 3.png