Vue.js 计算机属性computed和methods里的方法

在使用Vue.js时，会发现调用menthods里的方法也可以与计算机属性起到同样的作用,如：

<div id="app">

        <!--利用计算机属性实现逆向文本的效果-->
        <input type="text" v-model="text" property="请输入要逆转的文本/>

        <!--逆转的方法-->
        <h3>计算机属性逆转：{{reversedText}}</h3>
        <!--通过调用methods里的方法也可以与计算机属性起到同样的作用-->
        <!--注意，方法要带'()'-->
        <h3>方法逆转：{{reversedTextM()}}</h3>
 
</div>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                text: '123,456'
            },
            methods: {
                reversedTextM: function () { 
                    return this.text.split(',').reverse().join(',');
                },
            },
            computed: {
                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取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存。

Vue.js 计算机属性computed和methods里的方法

猜你喜欢