vue---methods和computed的区别

<p> </p>
<p>代码演示，打开控制台：</p>
<div id="app">
<div class="cnblogs_code">
<pre>    <div id = "app">
        <div>methods:{{sum()}}</div>
        <div>computed:{{Sum}}</div>
        <div>{{c}}</div>
        <button @click="fn">点击跟新</button>
    </div>
    <script><span style="color: #000000;">
        let vm </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
            el:</span>"#app"<span style="color: #000000;">,
            data:{
                message:</span>"你好吗"<span style="color: #000000;">,
                a:</span>1<span style="color: #000000;">,
                b:</span>2<span style="color: #000000;">,
                c:</span>""<span style="color: #000000;">
            },
            methods:{
                fn(){
                    </span><span style="color: #0000ff;">this</span>.c="跟新了与sum无关的视图"<span style="color: #000000;">,
                    console.log(</span>"点击了页面刷新试图了"<span style="color: #000000;">)
                },
                sum(){
                    console.log(</span>"methods中的sum被执行"<span style="color: #000000;">)
                    </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.a +<span style="color: #0000ff;">this</span><span style="color: #000000;">.b
                }
            },
            computed:{
                Sum:{
                    get:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        console.log(</span>"cpmputed中的c"<span style="color: #000000;">)
                        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.a + <span style="color: #0000ff;">this</span><span style="color: #000000;">.b
                    },
                }
            }
        })
    </span></script>

</pre>
</div>
</div>
<script type="text/javascript">// <![CDATA[
let vm = new Vue({
            el:"#app",
            data:{
                message:"你好吗",
                a:1,
                b:2,
                c:""
            },
            methods:{
                fn(){
                    this.c="跟新了与sum无关的视图",
                    console.log("点击了页面刷新试图了")
                },
                sum(){
                    console.log("methods中的sum被执行")
                    return this.a +this.b
                }
            },
            computed:{
                Sum:{
                    get:function(){
                        console.log("cpmputed中的c")
                        return this.a + this.b
                    },
                }
            }
        })
// ]]></script>