Vue中计算属性和方法的区别

当我们实现翻转字符串的业务逻辑时，使用插值表达式打码如下：

<div id="app">
	<div>{{msg}}</div>
	<div>{{msg.split('').reverse().join('')}}</div>
</div>

为了将复杂了业务逻辑便于管理，使得不显得杂乱无章，我们使用计算属性：

<div id="app">
    <div>{{msg}}</div>
        计算属性：<div>{{resverString}}</div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"happy"
            },
            computed:{
                resverString:function(){
                    console.log('computed');
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>

效果如下图：

对比使用methods方法：

	<div id="app">
        <div>{{msg}}</div>
        计算属性：<div>{{resverString}}</div>
        计算属性：<div>{{resverString}}</div>
        方法属性：<div>{{resv()}}</div>
        方法属性：<div>{{resv()}}</div>
    </div>

			computed:{
                resverString:function(){
                    console.log('computed');
                    return this.msg.split('').reverse().join('');
                }
            },
            methods:{
                resv:function(){
                    console.log('methods');
                    return this.msg.split('').reverse().join('');
                }
            }

结果如下图：

如图，控制台的结果说明，在相同的依赖（data中的数据）下，计算属性只会执行一次逻辑，而方法每次调用都会执行，所以：计算属性在一定条件下进行了一定的性能优化。

区别：计算属性是基于依赖进行缓存的，而方法则不缓存。