vue計算屬性computed和methods的區別

computed和methods的區別

在new Vue的配置參數中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區分一下才能做到正確的運用vue。
computed稱為計算屬性，顧名思義，計算就要返回一個計算的結果，所以，當我們要處理大量的邏輯，但是最后要取得最后的結果的時候可以用computed；
簡單示例：
要求：
<input type="text v-model="num1"><input type="text v-model="num2">
現在要返回num1和num2的和；
<script>
    new Vue({
        el:"#box",
        data:{
                num1:0,
                num2:0
                }
        computed:{    
                result:function(){
                        return this.num1 + this.num2    
                        // 計算屬性必須有一個返回值
                }
        }
     })
</script>

methods：是方法的意思，在js中，我們把一些函數叫做方法，一般情況下，要觸發這個方法就要執行，要執行就要有一個源來觸發，所以就需要一個事件源。這是和computed的一點不同之處；
methods的示例：
要求：
<\button @click="do()">點擊彈出<\/button>
<script>
    new Vue({
        el:"#box",
        data:{
                num1:0,
                num2:0
                }
        methods:{    
                do:function(){
                      alert('ok')
                      //這里根據情況，可以返回有返回值也可以沒有返回值。
                }
        }
     })
</script>

對比computed 和 methods：
computed計算的結果如果不發生改變就不會觸發result這個函數。而methods中一般都是定義的需要事件觸發的一些函數。每次只要觸發事件，就會執行對應的方法。如果把computed中的方法寫到method中會浪費性能。
computed必須返回一個值頁面綁定的才能取得值，而methods中可以只執行邏輯代碼，可以有返回值，也可以沒有。