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

在這個地方模板不再是簡單的宣告式邏輯。這裡是想要反轉字串message。當你想要在模板中多次引用此處的反轉字串時，就會更加難以處理。
所以，對於任何複雜邏輯，你都應當使用計算屬性。
提問：
（1）當你想要在模板中多次引用此處的反轉字串時，就會難以處理。
看一下下面這兩種寫法的區別：
<1>第一種寫法

<div id="app">
    計算前的屬性：{{ message }}
    <div>
        計算後的屬性：{{ reversedMessage }}
    </div>
</div>
var app = new Vue({
   el: '#app',
   data: {
      message: '旁邊有個小姐姐很漂亮'
   },
   computed: {
       reversedMessage: function() {
           return this.message.split('').reverse().join('');
       }
   },
})
 

<2>第二種寫法：

<div id="app">
   計算前的屬性：{{ message }}
    <div>
        計算後的屬性：{{ reversedMessage() }}
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           message: '旁邊有個小姐姐很漂亮'
        },
        
        methods: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('');
            }
        },
    })
</script>
 

第一種寫法用的是計算屬性 computed，因此我的理解是呼叫時用屬性的方式。
第二種寫法用的是方法methods，因此我的理解是呼叫時用方法的方式。
computed和methods的區別：
computed是基於它們的依賴進行快取的，只在相關依賴發生改變時才會重新求值。
而使用methods，在重新渲染的時候，函式總會重新呼叫執行。

computed setter
computed預設只有getter，不過需要時你可以使用setter。

<div id="app">
    計算前的屬性：{{ message }}
    <div>
        計算後的屬性：{{ reversedMessage }}
    </div>
    <div>
        {{ site }}
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '旁邊漂亮的女孩',
            url: 'www.baidu.com',
            message: '旁邊有個小姐姐很漂亮'
        },
        computed: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('');
            },
            site: {
                get: function() {
                	return this.name + ' ' + this.url;
                },
                set: function(newValue) {
                    let names = newValue.split(' ');
                    this.name = names[0];
                    this.url = names[names.length - 1]
                }
            }
        },
    })
    //呼叫setter，app.name app.url 也會相應的更新。
    app.site = '一定要有所作為 www.google.com';
    document.write('name: '+ app.name );
    document.write('<br />');
    document.write('url: '+app.url);
</script>
 

提問：
（1）這個set有什麼作用呢？
回答：可以改變app.site 的值。