一个案例带你了解computed属性

现在有一个需求，实现字符串翻转功能

       new Vue({
            el: '#app',
            data:{
                msg1:'hello',
                msg2:'world'
            },
            computed:{
                computedReverse:function(){
                    console.log('computed');
                    return this.msg1.split('').reverse().join('');
                }
            },
            methods:{
                methodsReverse:function(){
                    console.log('methods');
                    return this.msg2.split('').reverse().join('');
                }
            }

        })

computed计算属性和methods都能实现这个功能，那么它们之间有什么区别呢？

同时在页面输出这两种方式两次

<div id="app">
        <div>{{computedReverse}}</div>
        <div>{{computedReverse}}</div>
        <div>{{methodsReverse()}}</div>
        <div>{{methodsReverse()}}</div>
</div>

页面显示效果相同

再看控制台输出

都输出两次，computedReverse方法只执行了一次，methodsReverse()执行了两次

总结：
1.computed属性的方法在多次调用时，会利用缓存。它监听着data的变化，data变化时才会重新执行方法体。
2.methods中的方法，只要方法调用，就会执行方法体。
3.对比看来，当业务逻辑较多时，方法执行时间变长，重复调用同一方法，此时computed计算属性将会更节省时间，因为它不需要重复执行方法体。