一、計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<div>
    {{ message.split(‘‘).reverse().join(‘‘) }}
</div>

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。

所以，對於任何復雜邏輯，你都應當使用計算屬性。

<div id = ‘com‘>
        <h3>{{msg}}</
 
h3>
        <p>{{currentMsg}}</p>
        <button @click=‘clickHandler‘>更改</button>
</div>

  var com = new Vue({
            el:‘#com‘,
            data:{
                msg:‘學習computed‘
            },
            methods:{
                clickHandler(){

                    this.msg = ‘我更改了數據‘

                }

            },
            computed:{
                currentMsg(){
                    // computed方法中默認只有getter

                    return this.msg
                 }


                
            }

        })
 

當我點擊按鈕的時候更改了當前的數據，同時h3和p標簽中數據也隨時改變。

為什麽會這樣呢？

因為Vue知道com.currentMsg依賴與com.msg,因此當com.msg發生改變時，所有依賴com.currentMsg的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系。：計算屬性的getter函數是沒有副作用的，這使它更易於測試和理解。

同樣的上面操作，我們不用computed聲明的計算屬性方法，而僅僅通過methods中聲明的方法也能完成上面的效果，那麽為什麽又要使用computed方法呢？

因為計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要msg還沒有發生變化，多次訪問currentMsg計算屬性會立刻返回之前計算的結果，而不比再次執行函數。

計算屬性和偵聽器