vue生命周器与实例

最新推荐文章于 2024-07-22 17:01:36 发布

禅悟刂

最新推荐文章于 2024-07-22 17:01:36 发布

阅读量147

点赞数

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

本文链接：https://blog.csdn.net/weixin_42575310/article/details/103401971

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片中文字过小，请用放大镜查看

vue实例

vue生命周期函数

函数名称	阶段	说明
beforeCreate	创建阶段：创建之前	在beforeCreate执行的时候 data和methods中的数据尚未被初始化
created	创建阶段：创建	在created执行的时候 data和methods已经被初始化好了。如果要调用methods中的方法，或者操作data中的数据最早只能在created中操作
beforeMount	创建阶段：挂载之前	beforeMount执行的时候模板已经在内存中编译好了但是尚未挂载到页面中去此时页面还是旧的
mounted	创建阶段：挂载	mounted时实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他草错的话，这个实例就静静的躺在内存中，一动不动
beforeUpdate	运行阶段：数据更新之前	当执行beforUpdate的时候页面中显示的数据还是旧的此时data中的数据是最新的此时页面尚未和最新的数据同步
updated	运行阶段：数据更新之后	当update执行的时候页面和data中的数据已经同步，都是最新的数据
beforeDestroy	销毁阶段：销毁之前	当执行beforeDestroy的时候，vue实例身上的数据尚未被销毁
destroyed	销毁阶段：销毁之后	当执行destroyed的视乎，vue实例身上的数据被完全销毁

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="修改msg" @click="msg='no'">
			<h3 id="h3">{{msg}}</h3>
		</div>
		<script src="js/vue.js"></script>
		<script>
			const vm = new Vue({
				el : '#app',
				data : {
					msg : 'ok'
				},
				methods : {
					show () {
						console.log('执行了show方法！！')
					}
				},
				beforeCreate () { //第一个生命周期函数 表示实例被完全创建出来之前会执行它
					//console.log(this.msg) //返回undefined 找不到msg 表示 data没有被加载
					//console.log(this.show()) //找不到此方法  表示methods 尚未加载
					// 结论： 在beforeCreate执行的时候 data和methods中的数据尚未被初始化
				},
				created () { // 第二个生命周期函数
					//console.log(this.msg);//返回ok 表示可以data中的数据已经被加载
					//this.show(); //返回  执行了show方法！！ 表示methods中的数据已经被加载
					// 结论： 在created执行的时候 data和methods已经被初始化好了
					//如果要调用methods中的方法，或者操作data中的数据 最早只能在created中操作
				},
				beforeMount (){ // 第三个生命周期行数 表示模板已经在内存中完成了 但是并没有渲染到真正的页面中去
					//console.log(document.getElementById('h3').innerText);//返回{{msg}} 表示尚未渲染到页面上去
					//beforeMount执行的时候 模板已经在内存中编译好了但是尚未挂载到页面中去 此时页面还是旧的
					
				},
				mounted () { //第四个生命周期函数  表示内存中的模板，已经真是的挂载到了页面中 用户已经可以看到渲染好的页面了
					//console.log(document.getElementById('h3').innerText); 返回ok 表示可以得到页面中的内容
					//结论： mounted时实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他草错的话，这个实例就静静的躺在内存中，一动不动
				},
				//运行中的两个事件
				beforeUpdate () { //表示页面中的数据还没有被更行   数据被更新了
					//console.log("页面中的数据是："+document.getElementById('h3').innerText); 返回ok 
					//console.log("data中msg的数据是："+this.msg); 返回no
					//结论： 当执行beforUpdate的时候 页面中显示的数据还是旧的 此时data中的数据是最新的  此时页面尚未和最新的数据同步
				},
				updated (){  //表示页面中的数据和data中的数据保持同步
					//console.log("页面中的数据是："+document.getElementById('h3').innerText);   返回no
					//console.log("data中msg的数据是："+this.msg); 返回no
					//结论：当update执行的时候 页面和data中的数据已经同步，都是最新的数据
				}
			})
		</script>
	</body>
</html>