3.3 计算属性缓存

在上一章介绍指令与事件时，你可能发现调用methods里的方法也可以与计算属性起到同样的作用，比如本章第一个示例可以用methods改写为：

        <div id="app">
            <! -- 注意，这里的reversedText是方法，所以要带()-->
            {{ reversedText() }}
        </div>
        <script>
            var app = new Vue({
              el: '#app',
              data: {
                  text: '123,456'
              },
              methods: {
                  reversedText: function () {
                      // 这里的this指向的是当前Vue实例
                      return this.text.split(', ').reverse().join(', ');
                  }
              }
            })
        </script>

没有使用计算属性，在methods里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用methods就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text只要不改变，计算属性也就不更新，例如：

        computed: {
            now: function () {
              return Date.now();
          }
        }

这里的Date.now()不是响应式依赖，所以计算属性now不会更新。但是methods则不同，只要重新渲染，它就会被调用，因此函数也会被执行。

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。