3.Vue实例的生命周期

3.1 什么是Vue实例的生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

3.2 Vue实例生命周期图

VUE的实例的生命周期-小白菜博客

3.3 什么是生命周期钩子

生命周期钩子:就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。

3.4 生命周期钩子函数有哪些

创建期间的生命周期函数:

beforeCreate:

实例刚在内存中被创建出来,此时,还没有初始化好 data和methods属性。

触发时机:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created:

实例已经在内存中创建完成。此时data和methods已经在内存中创建完成,但是还没有开始编译模板。

触发时机:实例已经创建完成之后被调用。

beforeMount:

此时已经完成了模板的编译,但是还没有挂载到页面中显示。

触发时机:挂载开始之前被调用

mounted:

此时,已经将编译好的模板,挂载到了页面指定的容器中显示。

触发时机:挂载到实例之后调用

运行期间的生命周期函数:

beforeUpdate:

此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点。

触发时机:状态更新之前调用

updated:

此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

触发时机:实例更新完毕之后将会调用此函数

销毁期间的生命周期函数:

beforeDestroy:

在这一步,实例仍然完全可用。

触发时机:实例销毁之前调用

destroyed:

调用之后Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

触发时机:Vue 实例销毁后调用,组件销毁有很多种情况,比如页面关闭,页面跳转。

3.5 测试生命周期

创建一个测试页面,写入需要测试的钩子函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		  <div id="app">		  	
             <h1>{{message}}</h1>
          </div>

	    <script>
	    
	    var v = new Vue({
	    el: '#app',
	    data: {
	      message: 'Vue的生命周期'
	    },
	    beforeCreate: function() {
	      console.group('------beforeCreate创建前状态------');
	      console.log("%c%s", "color:red" , "el     : " + this.$el); 
	      console.log("%c%s", "color:red","data   : " + this.$data);
	      console.log("%c%s", "color:red","message: " + this.message) 
	    },
	    created: function() {
	      console.group('------created创建完毕状态------');
	      console.log("%c%s", "color:red","el     : " + this.$el); 
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message); 
	    },
	    beforeMount: function() {
	      console.group('------beforeMount挂载前状态------');
	      console.log("%c%s", "color:red","el     : " + (this.$el)); 
	      console.log(this.$el);
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message); 
	    },
	    mounted: function() {
	      console.group('------mounted 挂载结束状态------');
	      console.log("%c%s", "color:red","el     : " + this.$el); 
	      console.log(this.$el);    
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message);
	    },
	    beforeUpdate: function () {
	      console.group('beforeUpdate 更新前状态===============》');
	      console.log("%c%s", "color:red","el     : " + this.$el);
	      console.log(this.$el);   
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message); 
	    },
	    updated: function () {
	      console.group('updated 更新完成状态===============》');
	      console.log("%c%s", "color:red","el     : " + this.$el);
	      console.log(this.$el); 
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message); 
	    },
	    beforeDestroy: function () {
	      console.group('beforeDestroy 销毁前状态===============》');
	      console.log("%c%s", "color:red","el     : " + this.$el);
	      console.log(this.$el);    
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message); 
	    },
	    destroyed: function () {
	      console.group('destroyed 销毁完成状态===============》');
	      console.log("%c%s", "color:red","el     : " + this.$el);
	      console.log(this.$el);  
	      console.log("%c%s", "color:red","data   : " + this.$data); 
	      console.log("%c%s", "color:red","message: " + this.message)
	    }
	  })
	  </script>

		
	</body>
</html>

页面运行以后,按F12,查看Console里的信息:

VUE的实例的生命周期-小白菜博客

在Console中修改message的值:

VUE的实例的生命周期-小白菜博客

关闭页面,会调用对应的销毁函数。

4.Vue内部指令

4.1 v-bind

v-bind 属性绑定

测试案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
	<div id="app">
        <a v-bind:href="url">百度</a>
        <input type="text" v-bind:value="msg"  />
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	             url:"https://www.baidu.com",
	             msg:"文本框的值"
	         }
	     });
	 </script>

		
	</body>
</html>


说明:

v-bind后面是 :属性名=,"url"是找到data里面的属性url
当我们在控制台改变url和value时,对应值也会变化。类似的,我们还可以绑定其它属性,如src属性、class属性等

v-bind也可以简化为:

 <a :href="url">百度</a>
 <input type="text" :value="msg"  />

4.2 v-text和 v-html

v-text用来输出双标签里的内容,内容中有标签,标签按原样显示

v-html也是用来输出双标签里的内容,内容中有标签,会解析标签

测试案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">	
			
			
			<div v-text="msg" v-show="isShow"></div>
			
			<div v-html="msg" v-show="isShow"></div>
			
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					msg:"<h1>daimenglaoshi</h1>",
					isShow:true    // 设置是否显示  不能用大写TRUE    
				}
				
			})
			
		</script>
	</body>
</html>

测试结果:

VUE的实例的生命周期-小白菜博客

4.3 v-if,v-else-if,v-else

双分支结构 

测试案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			<div v-if="ok"> {{uname}}欢迎您</div>
			<div v-else>请登录</div>
		</div>
		
		<script >
			
			var v=new Vue({
				
				el:"#app",
				data:{
					
					ok:true,
					uname:"daimenglaoshi"
					
				}
				
			})		
			
		</script>
		
	</body>
</html>

说明:

v-if:后面是条件判断,v-else:其它情况
多分支结构:

		<div id="app">
			<div v-if="num>100">库存充足</div>
			<div v-else-if="num>0">库存紧张</div>
			<div v-else>缺货中</div>
			
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					
					num:101					
				}				
				
			})
			
		</script>

4.4 v-for

1.for循环普通数组

案例代码:

        <div id="app">
			 <a href="#" v-for="item in list">{{item}}</a>
			 
			  <p href="#" v-for="(item,index) in list">{{index}}-------{{item}}</p>
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{					
					list:[1,2,3,4,5]					
				}
				
			})
			
		</script>

说明:

item用来循环数值,index用来循环下标
2.for循环对象数组

案例代码:

	  <table id="app">			
			
			<tr v-for="user in userList">
				
				<td>{{user.id}}</td>
				
				<td>{{user.name}}</td>
				
			</tr>
			
		</table>		
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					userList:[
					{id:1,name:"daimenglaoshi"},
					{id:2,name:"2398779723"}
				   ]
				}
				
			})
			
		</script>
3.for循环对象

案例代码:

      <div id="app">
			
			<div v-for="value in user">{{value}}</div>
			
			<div v-for="(value,key) in user">{{key}}=>{{value}}</div>
			
		</div>
		
		<script>
			
			var u=new Vue({
				
				el:"#app",
				data:{
					
					user:{id:1,name:"呆萌老师",qq:"2398779723"}
				}
				
				
			})			
			
		</script>

VUE的实例的生命周期-小白菜博客
4.for循环数字

案例代码:

       <div id="app">
			<div v-for="i in 10 ">{{i}}</div>
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app"
				
			})
		</script>
VUE的实例的生命周期-小白菜博客