vue中父子组件的生命周期执行顺序

页面创建过程

说明：以下都是基于vue2进行试验

结论

父组件 beforeCreate-->父组件 created-->父组件 beforeMount-->子组件 beforeCreate-->

子组件 created-->子组件 beforeMount-->子组件 mounted---> （子组件 actived ）-->父组件mounted

注意：子组件被keep-alive包裹，而且v-if的值是true，则在相应顺序位置执行子组件的actived函数，若果v-if的值是false，则和单个组件一样，父 beforeCreate-->父 created-->父 beforeMount-->父mounted

<body>
    <div id="app">
        <div>父组件:{{fatherMsg}}</div>
        <keep-alive>
            <my-components v-if="show">
            </my-components>
        </keep-alive>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var child = {
        template: `
        <div>
        子组件:{{childMsg}}    
        </div>
      `,
        data: function () {
            return {
                childMsg: 'child'
            }
        },
        beforeCreate: function () {
            // alert("子组件beforeCreate；；");
            debugger;
        },
        created: function () {
            // alert("子组件created；");
            debugger;
        },
        beforeMount: function () {
            // alert("子组件beforeMount；；");
            debugger;
        },
        mounted: function () {
            // alert("子组件mounted；；");
            debugger;
        },
        activated: function () {
            // alert('子组件activated；keepAlive启用');
            debugger;

        },
        deactivated: function () {
            // alert("子组件deactivated；；keepAlive停用");
            debugger;

        },
    };
    var vm = new Vue({
        el: '#app',
        data: {
            fatherMsg: 'fathers',
            show: true
        },
        beforeCreate: function () {
            // alert('父组件beforeCreate');
            debugger;
        },
        created: function () {
            // alert('父组件created');
            debugger;
        },
        beforeMount: function () {
            // alert('父组件beforeMount');
            debugger;
        },
        mounted: function () {
            // alert('父组件mounted');
            debugger;
        },
        components: {
            'my-components': child
        }
    });
</script>

父组件中数据更新

子组件的模板没有使用keep-alive包裹

结论

1.子组件的模板中没有使用父组件中的数据

父组件 beforeUpadte-->父组件 update

2.子组件的模板中使用了父组件中的数据 (通过props接收并在子组件的模板中使用了)

父组件 beforeUpdate-->子组件 beforeUpdate-->子组件 updated-->父组件 updated

子组件的模板使用了keep-alive包裹

结论

1.子组件的模板中没有使用父组件中的数据（通过v-if来切换了子组件）

父组件 beforeUpadte-->子activated / 子deactivated --> 父组件 update

2.子组件的模板中使用了父组件中的数据 (通过props接收并在子组件的模板中使用了)

2.1keep-alive激活时

父组件 beforeUpadte-->子组件 beforeUpadte-->子组件 activated --> 子组件 updated-->父组件 updated

2.2keep-alive停用时
父组件 beforeUpadte-->子组件 deactivated-->父组件 updated

<body>
    <div id="app">
        <button @click='handlefather'>跟新父组件</button>
        <div>父组件:{{fatherMsg}}</div>
        <keep-alive>
            <my-components v-if="show" :from-father-msg="fatherMsg">
            </my-components>
        </keep-alive>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var child = {
        template: `
       <div>
           <div>
            子组件:{{childMsg}}
           </div>
           <div> from父组件:{{fromFatherMsg}}</div>
        </div>
      `,
        data: function () {
            return {
                childMsg: 'child'
            }
        },
        props: {
            fromFatherMsg: Number
        },
        activated: function () {
            // alert('子组件activated；keepAlive启用');
            debugger;
        },
        deactivated: function () {
            // alert("子组件deactivated；；keepAlive停用");
            debugger;
        },
        beforeUpdate() {
            debugger
        },
        updated() {
            debugger
        }
    };
    var vm = new Vue({
        el: '#app',
        data: {
            fatherMsg: 1,
            show: true
        },
        methods: {
            handlefather() {
                this.fatherMsg += 1
                this.show = !this.show
            }
        },
        beforeUpdate() {
            debugger
        },
        updated() {
            debugger
        },
        components: {
            'my-components': child
        }
    });
</script>

子组件数据跟新

**结论** 一般父组件的页面不会用到子组件的数据，所以子组件的数据发生跟新时不会影响父组件的生命周期函数的执行，除非父组件的页面中使用了子组件的数据，通过作用域插槽在父组件模板中使用子组件的数据是通过slot向子组件分发内容，实质还在子组件中，所以子组件的数据发生改变，而这个数据在父组件的作用域插槽中使用了也不会影响父组件的生命周期

posted @ 2021-09-11 21:19 Fen~ 阅读(663) 评论(0) 收藏举报

刷新页面返回顶部