Vue中生命周期常用函数及使用场景

最新推荐文章于 2024-08-06 16:49:23 发布

. . . . .

最新推荐文章于 2024-08-06 16:49:23 发布

阅读量3k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/84203649

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

1. created

此时状态：Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。
可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据。

2. mounted

此时状态：数据已经渲染在了浏览器的页面上。
可做操作：操作DOM节点

3. beforeDestory

此时状态：奄奄一息。
可做操作：移除定时器或者事件绑定。
但是销毁的时候需要手动销毁：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
</head>
<body>
	<div id="root">
		{{a}}
		<div @click="destroyBtn">销毁</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#root',
			data: {
				a: 1,
				b: 2
			},
			beforeDestroy() {
				alert("gameover")
			},
			methods: {
				destroyBtn: function() {
					this.$destroy();				
				}
			}
		})
		// vm.$destroy()
	</script>

</body>
</html>