Vue与React中父子组件生命周期的执行顺序？【生命周期详细知识讲解！！！】

news2024/9/22 21:13:20

文章目录

- 一、 Vue中父子组件生命周期
- - 1-1 加载渲染过程
  - 1-2 销毁过程
  - 1-3 展示案例
- 二、 React中父子组件生命周期
- - 2-1 关于React新旧版生命周期介绍
  - 2-2 父子组件生命周期
  - - 2-2-1 父子组件初始化
    - 2-2-2 子组件修改自身state
    - 2-2-3 父组件修改props
    - 2-2-4 卸载子组件

一、 Vue中父子组件生命周期

【Vue基础六】— 生命周期详解

1-1 加载渲染过程

执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载
- 父beforeCreate
- 父created
- 父beforeMount
- 子beforeCreate
- 子created
- 子mounted
- 父mounted

1-2 销毁过程

- 父beforeDestroy
- 子beforeDestroy
- 子destroyed
- 父destroyed

1-3 展示案例

展示
2. 代码【可粘贴运行】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <school />
    </div>
    <script>
        // 子组件
        const student = Vue.extend({
            name: 'student',
            template: `
                <div>子组件</div>
            `,
            data() {
                return {};
            },
            beforeCreate() {
                console.log("子组件————beforeCreate...");
            },
            created() {
                console.log("子组件————create...");
            },
            beforeMount() {
                console.log("子组件————beforeMount...");
            },
            mounted() {
                console.log("子组件————mounted...");
            },
            beforeUpdate() {
                console.log("子组件————beforeUpdate...");
            },
            updated() {
                console.log("子组件————updated...");
            },
            beforeDestroy() {
                console.log("子组件————beforeDestroy...");
            },
            destroyed() {
                console.log("子组件————destroyed...");
            }
        })

        // 父组件
        const school = Vue.extend({
            name: 'school',
            template: `
            <div>
             {{text}}
             <button @click="handle">点击销毁</button>
             <student/>
            </div> 
             `,
            components: {
                student
            },
            data() {
                return {
                    text: "哈哈",
                };
            },
            methods: {
                handle() {
                    this.$destroy();
                },
            },
            beforeCreate() {
                console.log("父组件————beforeCreate...");
            },
            created() {
                console.log("父组件————create...");
            },
            beforeMount() {
                console.log("父组件————beforeMount...");
            },
            mounted() {
                console.log("父组件————mounted...");
            },
            beforeUpdate() {
                console.log("父组件————beforeUpdate...");
            },
            updated() {
                console.log("父组件————updated...");
            },
            beforeDestroy() {
                console.log("父组件————beforeDestroy...");
            },
            destroyed() {
                console.log("父组件————destroyed...");
            },
          
        })

        const vm = new Vue({
            name: 'vm',
            el: '#root',
            components: {
                school
            }

        })

    </script>

</body>

</html>