Vue之路之--计算属性

先说说对官网上“计算属性”的理解：

为啥要利用计算属性?

是为了来应对复杂计算的挑战，一般情况下，对于简单的模板，因为逻辑比较简单，所以就直接用就行了，但是如果要对模板中的表达式做复杂的处理，而且要用到多个地方，如果直接写将会很复杂，而且也不利于维护，所以“计算属性”就是为了解决这个问题而生的（个人观点）

先看代码：Html部分

<div class="container" id="containBox">
		<span style="color: green">{{datas}}</span>
		<!-- 你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.slicefun 依赖于 vm.greetings ，因此当 vm.greetings 发生改变时，所有依赖于 vm.slicefun 的绑定也会更新。 -->
		<h2 style="color: red">{{slicefun}}</h2>
		<!-- 如果不加（），那么将会导致报错，所以......,从另一方面讲，methods中定义的都是方法呢，方法只有在执行的时候才会生效 -->
		<h3>{{slicefunction()}}</h3>
		<a href="">{{date-111111111111111111111111111}}</a>
	</div>

JS部分

var vm =  new Vue({
	el:"#containBox",
	data:{
		datas:"这就是我，不一样的花朵！",
		greetings:"hello,Vuejs,it is my pleaure to meet you!"
	},
	methods:{
		slicefunction:function(){
			return this.greetings.toUpperCase()
		}
	},
	//声明了一个计算属性slicefun，
	computed:{
		slicefun:function(){
			// return this.greetings.toUpperCase()
			return this.greetings.toUpperCase()
		},
		date:function(){
			return Date.now()
		}
	}
})

"你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.slicefun 依赖于 vm.greetings ，因此当 vm.greetings 发生改变时，所有依赖于 vm.slicefun 的绑定也会更新。"

 Vue 知道 vm.slicefun 依赖于 vm.greetings，  因为在slicefun里面有greetings，所以会有依赖；

"不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要greetings'，还没有发生改变，多次访问slicefun 计算属性会立即返回之前的计算结果，而不必再次执行函数。而methods是运行一次计算一次，

关于计算属性和methods，根据官网的总结，如果你不想想用缓存，那就请用method，如果你想用缓存，那就请用计算属性

利用缓存，我们可以提高写性能，尤其是在处理大量计算的时候更是如此，利用缓存我们也许只需要计算一次，但是不利用缓存我们就需要每次都计算，这样就严重影响了前端性能；

其实，在这里，你会发现其实这个时候，这个时候的compute好像有局限性--那就是只能返回（get），不能设置（set），然而在现实的应用中，更多的是返回和设置共存的，这里也就要谈到计算属性里面的getter和setter了；

其实，compute中的getter就是用来确定计算属性的值到底是多少，而setter就是来设置的，setter的回调函数在计算属性发生改变的时候才会调用，

以下是具体的案例：

		<i>{{fullname}}</i>
		<span>{{firstname}}</span>
		<span>{{lastname}}</span>
		<br>
		<h4>{{fullname1}}</h4>

JS部分

computed:{
		slicefun:function(){
			// return this.greetings.toUpperCase()
			return this.greetings.toUpperCase()
		},
		date:function(){
			return Date.now()
		},
		fullname:{
			// setter,当fullname发生改变的时候触发
			set:function(val){
				console.log(val)
				// 在set函数中，形参代表着fullname的新值
				var names =  val.split(" ");
				this.firstname = names[0];
				this.lastname = names[names.length-1]
			},
			// getter，这里是用来确定fullname的值到底是谁的，当fullname发生改变的时候之所以{{fullname}}会发生改变，
			// 主要就是因为fullname发改变会触发set函数，导致this.firstname 和 this.lastname发生改变，所以在get函数中，
			// 就会导致name1发生改变，最终导致返回值改变，fullname也就发生了改变
			get:function(){
				//console.log(name1)
				var name1  =  this.firstname + " " + this.lastname
				return name1
			}
		},
		//在刷新的时候会正常的返回fullname，但是在改变fullname1的时候，就会报错，因为没有setter，就不知道该如何处理this.datas
		//所以当然也就返回不了datas了
		fullname1:function(){
			return this.datas;
		}
	}

Vue 通过 watch 选项提供一个更通用的方法，来响应（监控）数据的变化。

先上实例吧：

<div id="VueRooter">
		<span>{{str}}</span>
		<input type="text" name="" v-model = "str">
		<!-- 由于双向绑定，所以当输入框中的发生变化的时候就会导致num发生变化，进而触发num的监控函数changestr -->
		<br>
		<h1>{{num}}</h1>
		<input type="text" name="" v-model = "num">
		<!-- 同理 -->
		<br>
		<h2>{{obj.tel}}</h2>
		<input type="text" name="" v-model = "obj.tel">
		<!-- 同理 -->
		<br>
		<i>{{book}}</i>
		<input type="text" name="" v-model = "book">
		<!-- 同理 -->
	</div>

JS部分

var vm = new Vue({
	el:"#VueRooter",
	data:{
		str:" hello VueJS！",
		num:5,
		judge:true,
		obj:{
			tel:13578932131
		},
		book:"这是一本好书"
	},
	methods:{
		changeNum:function(){
			return this.num-3
		},
		changestr:function(val,oldVal){
			console.log(val,oldVal)
		}
	},
	/*Vue 通过 watch 选项提供一个更通用的方法，来响应（监控）数据的变化。*/
	watch:{
		// 监控str这个表达式，当其发生变化的时候执行changestr这个方法，这个方法是定义在methods里面的
		str:"changestr",
		// 监控num表达式，当其发生变化的时候执行回调函数，其中的形参val，代表变化后的值，old代表变化前的值
		num:function(val,oldval){
			var str =  "新的数字是:"+ val +"旧的数字是:"+oldval
			// return str;
			console.log(str)
		},
		// 监控对象中的表达式tel的变化，注意不能写成obj.tel,会报错的
		"obj.tel":function(val,oldVal){
			console.warn("change!")
		},
		// 监控book
		book:{
			// 是否是深度，说实话不怎么理解什么意思
			deep:true,
			// 变化的时候要做的事情，一定是handler，不能随意命名
			handler:function(val,oldval){
				console.log("我是新的"+val,"我是旧的"+oldval)
			}
		}
	}
})
//vm.str = "dadadadasdasdsada"

怎么感觉计算属性好像是对表达式（数据）的进一步加工，而watch则更偏重于监控表达式的变化