1-9 Vue的计算属性

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

1-9 Vue的计算属性

Vue的计算属性（computed properties）

推荐阅读更多精彩内容