Vue的计算属性（computed properties）
-
<strong>起因？</strong>
- 虽然在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。比如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>- 这样，模板不再简单和清晰。在实现反向显示 message 之前，你应该通过一个函数确认它。
- 所以，Vue.js提供了 <strong>计算属性</strong> 来让我们去处理实例中的复杂逻辑。
计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。
-
案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> </head> <body> <div id="app"> <p>{{fullname}}</p> <p>{{reverse}}</p> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data:{ firstname: '张', lastname: '三丰' }, // 计算属性选项 computed: { fullname: function () { return this.firstname + this.lastname; }, reverse: function () { return (this.firstname + this.lastname).split('').reverse().join(''); } } }) </script> </body> </html> 在上面的案例中，计算属性
fullname 和 reverse的值始终取决于firstname 和 lastname。计算属性默认只有 getter ，当然在需要时我们也可以提供一个 setter 。计算属性被设计出来的目的在于：getter 是干净无副作用的。-
计算属性 和 Methods的区别？
当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。
如果不希望有缓存，我们可以用method取代computed。
疑惑：为什么需要缓存？
假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！
-
<strong>计算属性的setter方法</strong>
- 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p>{{ fullName }}</p> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { firstName: 'Tom', lastName: 'Jack' }, computed: { fullName: { // get方法 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]; } } } }) </script> </body> </html>- 运行结果：
vuea10.png
