Vue.js--计算属性缓存

计算属性缓存

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

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

一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text只要不改变，计算属性也就不更新。但是methods则不同，只要重新渲染，他就会被调用，因此函数也会被执行。

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