1、模板內的表示式非常便利，用於簡單的運算，但是，放入過多的邏輯運算就顯的笨重，難以維護。

解決：

1.1模板中使用計算屬性。

<template>
    <p>{{ reversedMessage }}</p>
</template>

<script>
    export default {
        data: {
            message: 'Hello'
        },
        computed: {
            reversedMessage (){
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>
 

1.2模板中使用方法

<template>
    <p>{{ reversedMessage () }}</p>
</template>

<script>
    export default {
        data: {
            message: 'Hello'
        },
        methods: {
            reversedMessage (){
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>
 

計算屬性VS方法：

計算屬性是基於它們的依賴進行快取的，只有相關依賴發生改變時它們才會重新求值。相比之下，每次觸發渲染時，總會呼叫方法再次執行函式。

我們為什麼需要快取？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代。

2、偵聽屬性：更通用的方式觀察、響應vue例項上的資料變動。watch偵聽回撥。

計算屬性VS偵聽屬性：

如果是命令式的、重複的，用計算屬性會更好。

如果資料變化時需要執行非同步（例如請求）或者開銷較大的操作時，用偵聽屬性最有用的。