VUE父子组件生命周期实探

​x
 
<!DOCTYPE html>
<html>
​
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
​
<body>
​
    <div id="app">
        <p>{{ message }}</p>
        <div v-if="show">
            <com></com>
            <com2></com2>
        </div>
        <button @click="show=!show">aaaa</button>
    </div>
​
    <script>
        var com = {
            template: '<div>这是组件 111 </div>',
            data() {
                return {}
            },
            beforeCreate: function () {
                console.group('beforeCreate 111创建前状态===============》');
                console.log("%c%s", "color:red", "el  111   : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data 111  : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message  111: " + this.message);
                console.groupEnd()
            },
            created: function () {
                console.group('created 111创建完毕状态===============》');
                console.log("%c%s", "color:red", "el   111  : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data 111  : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message  111 : " + this.message); //已被初始化
                console.groupEnd()
            },
            beforeMount: function () {
                console.group('beforeMount 111挂载前状态===============》');
                console.log("%c%s", "color:red", "el   111  : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  111  : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message 111 : " + this.message); //已被初始化 
                console.groupEnd()
            },
            mounted: function () {
                console.group('mounted 111挂载结束状态===============》');
                console.log("%c%s", "color:red", "el   111  : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 111  : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message  111 : " + this.message); //已被初始化 
                console.groupEnd()
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 111更新前状态===============》');
                console.log("%c%s", "color:red", "el  111   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  111  : " + this.$data);
                console.log("%c%s", "color:red", "message 111: " + this.message);
                console.groupEnd()
            },
            updated: function () {
                console.group('updated 111更新完成状态===============》');
                console.log("%c%s", "color:red", "el    111   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   111  : " + this.$data);
                console.log("%c%s", "color:red", "message 111 : " + this.message);
                console.groupEnd()
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 111销毁前状态===============》');
                console.log("%c%s", "color:red", "el    111   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   111  : " + this.$data);
                console.log("%c%s", "color:red", "message 111 : " + this.message);
                console.groupEnd()
            },
            destroyed: function () {
                console.group('destroyed 111销毁完成状态===============》');
                console.log("%c%s", "color:red", "el    111   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  111   : " + this.$data);
                console.log("%c%s", "color:red", "message 111 : " + this.message);
                console.groupEnd()
            }
        }
        var com2 = {
            template: '<div>这是组件 222</div>',
            data() {
                return {}
            },
            beforeCreate: function () {
                console.group('beforeCreate 222创建前状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data  222 : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message222: " + this.message);
                console.groupEnd()
            },
            created: function () {
                console.group('created 222创建完毕状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data 222  : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message222: " + this.message); //已被初始化
                console.groupEnd()
            },
            beforeMount: function () {
                console.group('beforeMount 222挂载前状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 222  : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message222: " + this.message); //已被初始化  
                console.groupEnd()
            },
            mounted: function () {
                console.group('mounted 222挂载结束状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 222  : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message222: " + this.message); //已被初始化 
                console.groupEnd()
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 222更新前状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  222 : " + this.$data);
                console.log("%c%s", "color:red", "message222: " + this.message);
                console.groupEnd()
            },
            updated: function () {
                console.group('updated 222更新完成状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 222  : " + this.$data);
                console.log("%c%s", "color:red", "message222: " + this.message);
                console.groupEnd()
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 222销毁前状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  222 : " + this.$data);
                console.log("%c%s", "color:red", "message222: " + this.message);
                console.groupEnd()
            },
            destroyed: function () {
                console.group('destroyed 222销毁完成状态===============》');
                console.log("%c%s", "color:red", "el   222  : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data  222 : " + this.$data);
                console.log("%c%s", "color:red", "message222: " + this.message);
                console.groupEnd()
            }
        }
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello word!",
                show: true
            },
            components: {
                com,
                com2
            },
            beforeCreate: function () {
                console.group('beforeCreate 000创建前状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data  000 : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message000: " + this.message);
                console.groupEnd()
            },
            created: function () {
                console.group('created 000创建完毕状态===============》');
                console.log("%c%s", "color:red", "el   000  : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data 000  : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message000: " + this.message); //已被初始化
                console.groupEnd()
            },
            beforeMount: function () {
                console.group('beforeMount 000挂载前状态===============》');
                console.log("%c%s", "color:red", "el   000  : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message000: " + this.message); //已被初始化  
                console.groupEnd()
            },
            mounted: function () {
                console.group('mounted 000挂载结束状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message000: " + this.message); //已被初始化 
                console.groupEnd()
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 000更新前状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data);
                console.log("%c%s", "color:red", "message000: " + this.message);
                console.groupEnd()
            },
            updated: function () {
                console.group('updated 000更新完成状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data);
                console.log("%c%s", "color:red", "message000: " + this.message);
                console.groupEnd()
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 000销毁前状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data);
                console.log("%c%s", "color:red", "message000: " + this.message);
                console.groupEnd()
            },
            destroyed: function () {
                console.group('destroyed 000销毁完成状态===============》');
                console.log("%c%s", "color:red", "el  000   : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data 000  : " + this.$data);
                console.log("%c%s", "color:red", "message000: " + this.message);
                console.groupEnd()
            }
        })
​
    </script>
​
</body>
​
</html>
HTML