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

1. created此时转态：Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据。2. mounted此时转态：数据已经渲染在了浏览器的页面上。可做操作：操作DOM节点3. beforeDestory此时转态：奄奄一息。可做操作：移除定时器或者事件绑定。但是销毁的时候需要手动销毁：<!...

. . . . .

3067人浏览 · 2018-11-18 19:40:37

. . . . . · 2018-11-18 19:40:37 发布

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>