18、计算属性缓存-methods方法同样起到计算属性的作用调用methods 里的力法也可以与计算属性起到同样的作用，

调用methods 里的力法也可以与计算属性起到同样的作用，比如下面示例可以用methods 改写为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18、计算属性缓存-methods方法同样起到计算属性的作用</title>
</head>
<body>
    <div id="app">
        <!-- 注意，这里的reversedText是方法，所以要带() -->
        {{reversedText()}}
    </div>

    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                text:'123,456'
            },
            methods:{
                reversedText:function(){
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>
</body>
</html>

输出：456,123

下面代码是计算属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13、计算属性</title>
</head>
<body>
    <div id="app">
        <!-- //{{text.split(',').reverse().join(',')}} -->
        {{reverseText}}
    </div>

    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                text:'123,456'
            },
            computed: {
                reverseText:function() {
                    return this.text.split(',').reverse().join(',')
                }
            },
        })
        // 输出：456,123
    </script>
</body>
</html>

输出：456,123

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

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

这里的Date.now()不是响应式依赖，所以计算属性now不会更新。但是methods则不同，只要重新渲染,它就会被调用,因此函数也会被执行。使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性,除非你不希望得到缓存。