console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<title></title>
	<script type="text/javascript" src="https://unpkg.com/vue"></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>