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>

	<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('');
                }
            }

{{componentVal('input')}}
componentVal () {
 return (val) => {
    return 'el-' + val
  }
}