VUE基础篇Part3（计算属性）

1、什么是计算属性？

因为VUE中 {{ }} 内只能写一行表达式，如果操作比较复杂导致表达式过长的话就会显得可读性很差，而且不好看，这时候就使用到了计算属性来代替这些复杂的操作

例子：

<div id="app">
	//需求：把数组111,222,333翻转成333,222,111
	//如果是不用计算属性写法
	{{ text.split(',').reverse().join(',') }}	//split表示分隔符，reverse表示数组翻转，join表示把数组变为字符串
	
	//使用计算属性写法后
	{{ reverseText }}
</div>

var app = new Vue({
	el:"#app",
	data:{
		text:'111,222,333'
	},
	computed:{
		reverseText:function(){
			return this.text.split(',').reverse().join(',')
		}
	}
})

2、计算属性的用法：

其实已经在第1点钟写出来了，计算属性的用法就是在 computed 中写一个方法，然后把需要进行的操作都写在这个方法里面，再把这个方法直接放到 {{ }} 中即可
唯一要注意的就是 computed 与 data 是同级的

3、计算属性中的 getter 和 setter：

计算属性是存在 getter 和 setter 的，如果让计算属性后面直接接一个 function(){} 的话就默认是 getter ，上面的例子就是 getter ，现在来写一个 setter

<div id="app">
	---你的名字是？
	---{{ fullName }}
</div>

var app = new Vue({
	el:"#app",
	data:{
		firstName:'孙',
		lastName:'笑川'
	},
	computed:{
		fullName:{
			get:function(){
				return this.firstName + this.lastName
			},
			set:function(newName){
				var names = newName.split(',')
				this.firstName = names[0]
				this.lastName = names[1]
			}
		}
	}
})

写好上面的代码后就可以使用 setter 了。
在控制台输出 app.fullName = “孙,狗”，页面上的 “孙笑川” 就会变为 “孙狗”

4、计算属性中的缓存，与methods的区别

调用methods里的方法也可以做到计算属性能做到的事，效果也可以是一样的
但是methods调用的时候要加上（），例子：

<div id="app">
	//需求：把数组111,222,333翻转成333,222,111
	
	//使用计算属性写法后
	我使用了计算属性：{{ reverseText1 }}
	
	//使用methods方法
	我使用了methods方法：{{ reverseText2() }}
</div>

var app = new Vue({
	el:"#app",
	data:{
		text:'111,222,333'
	},
	computed:{
		reverseText1:function(){
			return this.text.split(',').reverse().join(',')
		}
	},
	methods:{
		reverseText2:function(){
			return this.text.split(',').reverse().join(',')
		}
	}
})

区别：

methods：没有缓存，如果调用方法会导致重新渲染页面就会重新执行这个方法，如果不会重新渲染页面就不会执行这个方法

计算属性：有缓存，不会每次都执行，只有和自身相关的数据发生变化的时候才会重新执行，与是否渲染无关

5、什么时候用 methods ？什么时候用计算属性？

看情况使用，最重要的是取决于是否需要进行缓存，如过需要遍历一个大数组的时候，用到缓存会更方便，可以使用计算属性。