一、起因？
虽然在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.
比如：

<div id="example">
    {{ message.split('').reverse().join('') }}
</div>

这样,模板不再简单和清晰.在实现反向显示message之前,你应该通过一个函数确认它.
所以,Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑.
计算属性(computed properties)就是不存在于原始数据中,而是在运行时实时计算出来的属性.

通过四种方式让数据在页面显示出来,推荐使用后面2种:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>初始值:{{ message }}</p>
    <p>翻转值:{{ message.split('').reverse().join('') }}</p>
    <p>函数调用:{{ reverseStr() }}</p>
    <p>计算属性:{{ reverse }}</p>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue !'
        },
        methods:{
            reverseStr(){
                return this.message.split('').reverse().join('')
            },
        },
        computed:{
            // get方法
            reverse(){
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

二、计算属性 和 Methods的区别？
    当页面重新渲染(不是刷新)的时候,计算属性不会变化,直接读取缓存使用,适合较大量的计算和改变频率较低的属性;
    而method,就是当页面重新渲染的时候(页面元素的data变化,页面就会重新渲染),都会重新调用method.
    如果不希望有缓存,我们可以用method取代computed.
    疑惑：为什么需要缓存？
    假设我们有一个重要的计算属性A, 这个计算属性需要一个巨大的数组遍历和做大量的计算.然后我们可能有其他的计算属性依赖于A.如果没有缓存,我们将不可避免的多次执行A的getter方法
    
三、计算属性的setter方法
    计算属性默认只有getter,不过在需要时你也可以提供一个setter.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ showinfo }}</p>
    <button @click="deal()">调用计算属性的setter方法</button>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            name:'Apollo',
            age:28,
        },
        methods:{
            deal(){
                // 调用showinfo的setter方法
                this.showinfo = 'Merry 26';
            }
        },
        computed:{
            // get方法
            /*
            showinfo(){
                return this.name+'今年'+this.age+'岁!'
            },
            */
            showinfo:{
                // get方法
                get(){
                    return this.name+'今年'+this.age+'岁!'
                },
                // set方法
                set(str){
                    let infoArr = str.split(' ');
                    this.name = infoArr[0];
                    this.age = infoArr[1];
                }
            },

        }
    })
</script>
</body>
</html>

在上面的案例中，计算属性showinfo的值始终取决于name 和 age.

计算属性默认只有 getter ，当然在需要时我们也可以提供一个 setter .

计算属性被设计出来的目的在于：getter 是干净无副作用的.