1. 生命周期的定义
	<!-- 
生命周期:
	1.又名:生命周期回调函数、生命周期函数、生命周期钩子
	2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
	3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
	4.生命周期函数中的this指向是vm 或 组件实例对象
	 -->
	 <!-- 
常用的生命周期钩子:
	1.mounted:发送ajax请求,启动定时器、绑定自定义事件、订阅消息等【初始化操作】
	2.beforeDestory:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue的实例:
	1.销毁后借助Vue开发者看不到任何信息
	2.销毁后自定义事件会失效,但原生DOM事件依然有效
	3.一般不会再beforeDestory操作数据,因为即便操作数据,也不会再触发更新流程了。
	  -->

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引出生命周期</title>
		<script src="../status/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!-- 
		生命周期:
			1.又名:生命周期回调函数、生命周期函数、生命周期钩子
			2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
			3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
			4.生命周期函数中的this指向是vm 或 组件实例对象
	 -->
	<body>
		<div id="app">
			<h3 :style="{opacity:opacity}">欢迎学习Vue</h3>
			<button type="button" @click="stop">关闭变化</button>
			<button type="button" @click="start">开始变化</button>
		</div>
		<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						opacity:1
					}
				},
				methods:{
					stop:function(){
						clearInterval(this.timer)
						this.timer = null
					},
					start:function(){
						if(this.timer) {
						   return
						}
						this.timer = setInterval(()=>{
							this.opacity -=0.05
							console.log(this.opacity)
							if(this.opacity<=0){
								this.opacity = 1
								}
						},100)
					}
				},
				//Vue完成模板的解析并把真实的DOM元素放入页面后(挂载完毕)调用mounted
				mounted:function(){
						//循环执行(setInterval)  区别:定时执行 (setTimeout)
						// 用法是setInterval(“方法名或方法”,“延时”), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
					this.timer = setInterval(()=>{
						this.opacity -=0.05
						console.log(this.opacity)
						if(this.opacity<=0){
							this.opacity = 1
							}
					},100)
				}
			})
			vm.$mount("#app")
		</script>
	</body>
</html>

2.钩子函数:beforeCreate、 created
		<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						n:1
					}
				},
				beforeCreate:function(){
					console.log('该函数:尚未进行数据监测、数据代理')
				},
				created:function(){
					console.log('该函数:可以访问到data、methods等')
				}
			})
			vm.$mount("#app")
		</script>
3.beforeMount、mounted
	<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						n:1
					}
				},
				beforeMount:function(){
					console.log('该函数:页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终不奏效')
				},
				//Vue完成模板的解析并把真实的DOM元素放入页面后(挂载完毕)
				mounted:function(){
					console.log('该函数:页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作')
				}
			})
			vm.$mount("#app")
		</script>
4.beforeUpdate、updated
<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						n:1
					}
				},
				//data变化-流程
				beforeUpdate:function(){
					console.log('data变化就调用,数据是新的,但页面是旧的,即:页面尚未和数据保持同步')
				},
				updated:function(){
					console.log('data变化就调用,数据是新的,页面是新的,即:页面和数据保持同步')
				}
			})
			vm.$mount("#app")
		</script>
5.beforeDestroy、destroyed
	<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						n:1
					}
				},
				//销毁流程:只要调用 vm.$destroy(),下面的两个钩子函数-都会被调用;完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令与事件监听器
				//;
				//vm中所有的:data、methods、指令等,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
				beforeDestroy:function(){
					console.log('')
				},
				destroyed:function(){
					console.log('')
				}
			})
			vm.$mount("#app")
		</script>
Logo

前往低代码交流专区

更多推荐