Vue实践–计算属性「建议收藏」

大家好，欢迎来到IT知识分享网。

简单的文本转换可以通过filters来转换，但是当涉及到复杂的逻辑的时候就要通过计算属性完成了

计算属性都是以函数的形式写在computed选项中，计算属性中的this指向Vue实例本身，只要最后有返回的值就行， 

		/* getter与setter (博客上见)*/
		var myApp1 = new Vue({
			el:"#container1",
			data:{
				firstName:"John",
				lastName:"Smith"
			},
			computed:{
				fullName:{
					// getter，默认
					get:function(){
						return this.firstName + " "+ this.lastName
					},
					//setter当改变计算属性的值的时候才会触发
					set:function(newFullName){
						var nameArr = newFullName.split(" ");
						this.firstName = nameArr[0];
						this.lastName = nameArr[nameArr.length-1]
					}
				}
			}
		});
		myApp1.fullName = "Jodan Micale";

每一个计算属性都包含一个getter，一个setter函数（其实就像上面的那样），

“当手动修改计算属性的值就像修改一个普通的数据那样的时候就会触发setter函数”，理解这句话对于理解setter的触发时刻很关键，首先修改的是计算属性的值(而不是其他的值),“就像修改普通数据那样的时候”（我们知道修改普通数据就像修改firstName：myApp1.firstName = “Blaer”是这样的，所以修改计算属性的值的时候也是类似）；
虽然绝大多数情况下，我们只会用到getter方法（此时直接采用默认的计算属性的写法就行），但也要知道还有一个setter。

下面我们了解一下两个小技巧：计算属性可以依赖其他计算属性，本Vue实例中的计算属性可以依赖其他Vue实例中的数据（毕竟数据都可以通过实例.属性访问数据）

var myApp2 = new Vue({
			el:"#container2",
			data:{
				cat:3,
				mouse:5,
				dog:9,
				wolf:10
			},
			computed:{
				// 计算属性间的依赖，allAnimals依赖于catAndmouse
				allAnimals:function(){
					return this.dog + this.wolf+this.catAndmouse
				},
				catAndmouse:function(){
					return this.cat+this.mouse
				},
				// 计算属性，实例间数据的依赖
				others:function(){
					return myApp1.firstName + this.cat
				}
			}
		})

有些功能通过methds也可以实现，
计算属性是基于依赖缓存的（只要计算属性所依赖的值不发生变化，值就不变）、
而methods只要页面重新渲染就会变（但此时计算属性不一定会变哦）。那么到底啥时间用计算属性，啥时间用methods呢，一个很实用的判断方法是看你是否需要缓存，当你遍历大数组和做大量计算的时候，就应当使用计算属性，除非你不想得到缓存；