title: 3、计算属性
date: 2017-07-27 10:19:21
tags: vue笔记(妙味)
之前说过，模板内在插值中写表达式很方便，但是如果放太多逻辑会让模板过重难以维护。所以在模板内只适合简单的运算，稍微复杂的语句就需要计算属性了。
computed和methods
计算属性应该放到computed属性中，函数放到methods中，而实际上计算属性的语句也是写到函数里，所以其实写到methods也是可以的，但两者还是有区别的。
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Methods reversed message: "{{ reversedMessage1() }}"</p>
</div>
var vm = new Vue({
el:'#app',
data:{
message:'hello'
},
computed:{
reversedMessage: function(){
return this.message.split('').reverse().join('')
}
},
methods:{
reversedMessage1: function(){
return this.message.split('').reverse().join('')
}
}
})
对于最终的结果，methods和computed是相同的，
不同的是computed是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数(假如函数里有获取当前时间的语句也不会执行)。
相比而言，只要发生重新渲染，methods调用总会执行该函数。
所以假如有一个性能开销比较大的计算属性A，而且可能别的计算属性还依赖于A的返回值，那么有缓存可以节省性能。但是不需要缓存时可以用methods代替。
watch
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，就是watch属性。
但是当有一些数据需要随着其他数据变动而变动时，很容易滥用watch，通常更好的方法是使用computed属性而不是命令式的watch。
<div id="app1">
{{ fullName }}
</div>
<div id="app2">
{{ fullName }}
</div>
watch的方式，只要data中的数据发生变化，watch就会监测到，并执行相对应的方法。
var app1 = new Vue({
el:'#app1',
data:{
firstName:'Foo',
lastName:'Bar',
fullName:'Foo Bar'
},
watch:{
firstName: function(val){
this.fullName = val + ' ' + this.lastName;
},
lastName:function(val){
this.fullName = this.firstName + ' ' + val;
}
}
})
app1.firstName = 'tim';
computed的方式，这里就是上面说的，fullName会随着firstName和lastName的改变而改变。很明显在这里使用computed的方法更简洁。
var app2 = new Vue({
el:'#app2',
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName: function(){
return this.firstName + ' ' + this.lastName;
}
}
})
app2.firstName = 'tom';
get和set
computed中不仅有get，还有set方法。
之前介绍的都是get方法，也就是data中的数据作为参数，通过函数内部计算，返回一个新的数据。而set方法是将计算后得新数据的值作为参数，改变原本data中的数据。
<div id="app1">
{{ fullName }}
</div>
var app1 = new Vue({
el:'#app1',
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName;
},
// 这里会将fullName的值最为参数传进来。
set:function(newValue){
var name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[name.length - 1];
}
}
}
})
// 这里更改fullName的值会调用set()，然后会改变firstName和lastName的值。在通过get展示在html中
app1.fullName = 'john Doe';
在使用Vue的时候，get会在改变data的数据时被调用，而set会在改变computed中新数据的返回值的时候被调用。
