vue实例的生命周期

最新推荐文章于 2022-09-21 16:41:28 发布

朽木自雕xmzd

最新推荐文章于 2022-09-21 16:41:28 发布

阅读量95

点赞数

分类专栏：前端 # vue 文章标签： vue vue生命周期函数

本文链接：https://blog.csdn.net/qq_16687863/article/details/103107921

版权

前端同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期函数：就是生命周期事件的别名而已（也可以叫做生命周期钩子）；
主要的生命周期函数分类：

创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建出来，此时 data 和 methods 已经创建出来，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
beforeUpdate：状态更新之前执行函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面重新被渲染好了
销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

见下图：

beforeCreate生命周期钩子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app"></div>
		
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					msg: "data里面的数据"
				},
				methods: {
					show(){
						console.log("该函数被执行了");
					}
				},
				beforeCreate() {
					console.log(this.msg);  //undefined
					this.show();   //TypeError: this.show is not a function
				}
			})
		</script>
	</body>
</html>

朽木自雕xmzd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例的生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期函数：就是生命周期事件的别名而已（也可以叫做生命周期钩子）；主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建出来，此时 data 和...
复制链接

扫一扫