3.1 什么是计算属性

通过上一章的介绍，我们已经可以搭建出一个简单的Vue应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如：

        <div>
            {{ text.split(', ').reverse().join(', ') }}
        </div>

这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上例可以用计算属性进行改写：

        <div id="app">
            {{ reversedText }}
        </div>
        <script>
            var app = new Vue({
              el: '#app',
              data: {
                  text: '123,456'
              },
              computed: {
                  reversedText: function () {
                    // 这里的this指向的是当前的Vue实例
                    return this.text.split(', ').reverse().join(', ');
                  }
              }
          })
        </script>

所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。