vue计算属性（computed）和方法（methods）的区别

分别利用computed和methods实现翻转字符串的效果
计算属性computed方法：

    <div id="example">
       <p>Reversed message: "{{ reversedMessage() }}"</p>
   </div>
   <script>
       var vm = new Vue({
           el: '#example',
           data: {
               message: 'Hello'
           },
           computed: {
               // 计算属性的 getter
               reversedMessage: function () {
               // `this` 指向 vm 实例
                   return this.message.split('').reverse().join('')
               }
           }
       })
   </script>

methods方法：

    <div id="example">
        <p>Reversed message: "{{ reversedMessage() }}"</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

可以发现两段代码实现的最终效果其实是一样的，然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。