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

1. created

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

2. mounted

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

3. beforeDestory

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


<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>

updated

当页面发生变化的时候才触发此声明周期函数。

你可能感兴趣的:(前端开发)