Vue计算属性Vs方法

Vue中的计算属性vs 方法
在下面的代码定义了两个计算属性（reversedMessage、reversedMessageOne）和一个方法 reversedMessageTwo,计算属性reversedMessage与方法reversedMessageOne返回的值代码都一样（返回数据message与当前的时间），他们返回值都依赖于数据message.

<script>
        var vm = new Vue({
            el: '#example',
            data: {
              message: 'Hello'
            },          
            methods: {
            reversedMessagetwo: function () {
                return this.message+new Date().toString();
             }
            },
            computed: {
              // 计算属性的 getter
              reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message+new Date().toString();
              },
              reversedMessageOne:function(){
                return new Date().toString();
              }
            }
        })
</script>

1当message不变时

计算属性reversedMessage值不会改变，计算属性依赖于数据message

• reversedMessage、 reversedMessageOne与reversedMessageTwo值分别为：

vm.reversedMessage
"HelloThu, 13 Sep 2018 03:46:47 GMT"
vm.reversedMessageOne
"Thu, 13 Sep 2018 03:46:59 GMT"
vm.reversedMessagetwo()
"HelloThu, 13 Sep 2018 03:47:05 GMT"
vm.reversedMessage
"HelloThu, 13 Sep 2018 03:46:47 GMT"
vm.reversedMessageOne
"Thu, 13 Sep 2018 03:46:59 GMT"
vm.reversedMessagetwo()
"HelloThu, 13 Sep 2018 03:47:18 GMT"

2当message变化时

• reversedMessage、 reversedMessageOne与reversedMessageTwo值分别为：

vm.message="hahaha"
"hahaha"
vm.reversedMessage
"hahahaThu, 13 Sep 2018 03:58:24 GMT"
vm.reversedMessageOne
"Thu, 13 Sep 2018 03:46:59 GMT"
vm.reversedMessagetwo()
"hahahaThu, 13 Sep 2018 04:02:28 GMT"
vm.reversedMessage
"hahahaThu, 13 Sep 2018 03:58:24 GMT"
vm.reversedMessageOne
"Thu, 13 Sep 2018 03:46:59 GMT"
vm.reversedMessagetwo()
"hahahaThu, 13 Sep 2018 04:02:43 GMT"

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
而方法reversedMessageTwo不基于依赖缓存，每次调用，都会返回最新的结果。
当计算属性没有任何依赖时，计算结果保持不变。