Vue入门教程--vue的计算属性computed详解（article:14）

Vue.js 初步入门

---

computed：计算属性，在处理一些复杂逻辑时是很有用。

我们在处理一些字符串或者一些表达式的计算的时候，写在插值表达式或者data域中是非常复杂且不美观的，比如这个：

{{"abcde".toLocaleUpperCase()}}
data:{
	result1:"abcde".toLocaleUpperCase()
}

甚至可以写个方法来计算：

methods:{
	result2(){
		return "abcde".toLocaleUpperCase();
	}
}

vue提供了computed关键字来提供这类问题的解决方案：

使用详情

以后凡是涉及到处理一些复杂逻辑的问题，都可以使用这一个关键字：

		computed:{
				result3:function(){
					return "abcde".toLocaleUpperCase();
				}
			}

效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

如上声明了一个计算属性 result3。
提供的函数将用作属性 vm.result3的 getter 。
computed 属性默认只有 getter，不过在需要时你也可以提供一个 setter ：

		data:{
			msg:'abcde'
		}
		computed:{
				result3:{
					get:function(){
						return msg.toLocaleUpperCase();
					},
					set:function(strValue){
						this.msg = strValue;
					}
				}
			}

若把vue实例传递给它的引用，给相应元素赋值时，set会得到调用：

let vm = new Vue({...});
vm.result3 = 'qwert';

---