Vue2.x之计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

故模板中的复杂逻辑，我们应该使用计算属性来替代，二者起到一样的作用。

<div id="app">
    {{dealTitle}}
</div>
<script>
    let data = {
        title: 'this is a title'
    }
    let app = new Vue({
        el: '#app',
        data,
        computed: {
            // 计算属性函数的第一个参数指向该Vue实例
            dealTitle(app) {
                return app.title.toUpperCase()
            } 
        }
    })
</script>

  计算属性会一直监听着它使用的data对象中的属性的变化，当它使用的变量变化时，计算属性的返回值也会自动变化。

setTimeout(() => {
     app.title = "title was changed"
}, 2000)