Vue的生命周期

Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、已创建（created）、编译前（beforeMount）、编译后（mounted）、更新前（beforeUpdate）、更新后（update）、销毁前（beforeDestroy）、销毁后（destroyed）,以上各个阶分别会有对应的“钩子函数”以Vue实例的

初心鸿鹄

2787人浏览 · 2018-02-09 12:59:35

初心鸿鹄 · 2018-02-09 12:59:35 发布

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue的生命周期</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		[v-cloak]{
			display: none 
		}
	</style>
</head>
<body>
	<div id="container" v-cloak>
		<h3>{{greeting}}</h3>
		<button @click="updateFunc">更新实例</button>
		<button @click="destroy">销毁实例</button>
	</div>
	<script type="text/javascript" src="../dist/vue.min.js"></script>
	<script type="text/javascript">
		/**
		 *   Vue实生命周期中的钩子函数，是作为实例的选项存在的
		 */
		var app =  new Vue({
			el:"#container",
			data:{
				greeting:"hello,world!"
			},
			methods:{
				// 数据更新，会触发beforeUpdate以及update钩子函数
				updateFunc:function(){
					this.greeting = "嗨，大家好！"
				},
				// 销毁实例，会触发beforeDestroy和destroyed钩子函数
				destroy:function(){
					this.$destroy()//实例.$destroy()，用来销毁实例，释放内存空间
				}
			},
			beforeCreate:function(){
				alert("此时Vue实例被创建，但是却没有开始观测(并监视)数据和初始化事件，也就是说此时只是有一个Vue实例的空壳子")
			},
			created:function(){//常用，可以用来进行数据的初始化
				alert("此时Vue实例已经被创建，而且完成了数据的观测和事件的初始化")
			},
			beforeMount:function(){
				alert("模板编译之前，此时还没有将数据挂载到元素上")
			},
			mounted:function(){//常用，
				alert("模板已经完成了编译和已经挂载，此时才开始渲染界面，并显示到页面上")
			},
			beforeUpdate:function(){
				alert("实例更新之前,在这里所谓的更新，实例上任意一部分更新均会触发此函数，在这里是更新了数据")
			},
			updated:function(){
				alert("实例更新之后")
			},
			beforeDestroy:function(){
				alert("实例销毁之前,所谓的销毁就是该实例所拥有的内存空间被释放和销毁")
			},
			destroyed:function(){
				alert("实例销毁之后")
			}
		})
	</script>
</body>
</html>

在不同的时期会自动触发对应的钩子函数，来完成一些事情,最常用的是created，常用来初始化数据，还有就是mounted

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^