vue基础五：钩子函数(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye)

最新推荐文章于 2024-04-11 03:53:16 发布

冷凝娇

最新推荐文章于 2024-04-11 03:53:16 发布

阅读量2.7k

点赞数 1

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/ak739105231/article/details/121630989

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vm的生命周期函数

- - - - 1. 生命周期的定义
        2.钩子函数：beforeCreate、 created
        3.beforeMount、mounted
        4.beforeUpdate、updated
        5.beforeDestroy、destroyed

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>

冷凝娇

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础五：钩子函数(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye)

vm的生命周期函数1. 生命周期的定义2.钩子函数：beforeCreate、 created3.beforeMount、mounted4.beforeUpdate、updated5.beforeDestroy、destroyed1. 生命周期的定义 <!-- 生命周期: 1.又名:生命周期回调函数、生命周期函数、生命周期钩子 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的this指
复制链接

扫一扫