尚硅谷的vue旅程04-vue的计算属性(computed)和监听(watch)

简介

1.计算属性 (将数据在computed对象中“加工”后,再显示出来)
	在computed属性对象中定义计算属性的方法
	在页面中使用{{方法名}}来显示计算的结果
	
2.监视属性: (注意:要对变化的对象进行监视.监视有两种方式)
	通过通过vm对象的$watch()或watch配置来监视指定的属性
	当属性变化时，回调函数自动调用，在函数内部进行计算

代码示例

<div id="demo">
	姓: <input type= "text" placeholder="FirstName" v-model="firstName"><br>
    名: <input type="text" placeholder="LastName" v-model="lastName"><br>
	姓名1(单向): <input type="text" placeholder=" Full Name1" v-model="fullName1" >																<br>
	姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2">										<br>
    姓名3(双向): <input type="text" placeholder= "Full Name3" v-model="fullName3">										<br>
</div> 
		 
	
<script src="../js/vue.js"></script> 
<script type="text/javascript">
	let vm = new Vue({
		el:"#demo",
		data:{
			firstName:"张",
			lastName:"三丰",
			fullName2:"张三丰",
			fullName3:"张三丰"
		},
		//计算属性对象(显示时间:在初始化显示和data数据更新时)
		computed:{
			fullName1: function(){
				return this.firstName + this.lastName;
			}
		},
		// 监视方式一: watch属性 
		watch:{
			firstName: function(value) { //监视对象:firstName 
				console.log(this); //this指的是 vue对象的实例vm
				this.fullName2 = value + this.lastName;//在lastName输入框中输入时,此处的lastName属性值依然是初始化值
			}
		}
	})	
	
	//监视方式二   实例方法&watch() 	
	vm.$watch("lastName", function(newValue,oldValue){
		this.fullName3 = this.firstName + newValue;//在firstName输入框中输入时,此处的firstName属性值依然是初始化值
	})	
 
	//综合上述,有时候,计算属性computed的效率要比监听属性的效率要高.	
	// (监听属性在其他地方也会有应用)