vue的计算属性用于简单运算，在模版中太多的逻辑会难以维护，例如:
1
2
3
| <div id="example">
{{ message.split('').reverse().join('') }}
</div>
|
这个地方逻辑是字符串反转，如果多次使用会造成不好维护的现象，而且逻辑代码写在模版里可读性并不是很好。
1
2
3
4
| <div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
|
有的人会说在methods里写个方法在模版里调用也是可以的，跟计算属性没什么区别，但我要说的是实现结果是一样的，但是计算属性是把值存储在缓存里，当值不发生改变的时候取得是缓存的值，而函数调用每次都会执行，性能优化并不是很好，所以极力推荐使用计算属性。
计算属性的setter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
|
现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
