15、Vue-组件的生命周期

15、Vue-组件的生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id='app'>
			<App></App>
		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js">

	</script>
	<script type="text/javascript">
		/*
		生命周期钩子(函数)
		beforeCreate
		created
		beforeMount
		mounted
		beforeUpdate
		updated
		activated
		deactivated
		beforeDestroy
		destroyed
		errorCaptured
		*/


		Vue.component("Test", {
			data() {
				return {
					msg: 'hello',
				}
			},
			template: `
				<div>
					<div>{{msg}}</div>
					<button @click='changerHandeler'>改变</button>
				</div>
				
			`,
			methods: {
				changerHandeler() {
					this.msg = this.msg + '😂'
				}
			},
			beforeCreate: function() {
				// 组件创建之前
				console.log(this.msg);
			},
			created: function() {
				// 组件创建之后
				// 在created这个方法中可以操作后端的数据  数据驱动试图
				// 应用:发起Ajax请求
				console.log(this.msg);
			},

			beforeMount: function() {
				// 挂在数据到DOM之前会调用此方法
				console.log(document.getElementById("app"));
			},
			mounted: function() {
				// 挂在数据到DOM之后会调用此方法
				// 应用:操作DOM
				console.log(document.getElementById("app"));
			},

			beforeUpdate: function() {
				// 在更新DOM之前调用   应用:可以获取原始DOM
				console.log(document.getElementById("app").innerHTML); // 查看DOM结构
			},
			updated: function() {
				// 在更新DOM之后调用   应用:可以获取最新的DOM 
				console.log(document.getElementById("app").innerHTML); // 查看DOM结构
			},

			beforeDestroy: function() {
				// 组件销毁之前
				console.log("创建组件之前")
			},
			destroyed: function() {
				// 组件销毁之后
				console.log("销毁组件之后")
			},

			activated: function() {
				// 组件被激活了
				console.log("组件被激活了")
			},
			deactivated: function() {
				// 组件被停用了
				console.log("组件被停用了")
			},
		})

		var App = {
			data() {
				return {
					isShow: true
				}
			},
			// Vue内置组件<keep-alive></keep-alive>
			// 缓存机制:能在组件的切换过程中将所有状态保存在内存中,防止重复渲染DOM
			template: `
				<div class='app'>
					<keep-alive>
						<Test v-if='isShow'/>
					</keep-alive>
					<button @click='isShow = !isShow'>创建销毁组件</button>
				
				</div>
			
			`,
		}

		new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			components: {
				App
			},
		});
	</script>
</html>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页