Vue中computed與method的區別

computed和method都可以當做方法使用

computed和method的區別

區別一：

computed調用是屬性調用，不需要加括號，

methods是函數調用，需要加括號

html代碼:

<div id="app">
        <input type="text"v-model.number="a">
        <input type="text"v-model.number="b">
        <p v-cloak>結果：{{handle()}}</p>
        <p v-cloak>結果：{{handleCom}}</p>
</div>

js代碼：

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            sum:"",
        },
        methods:{
            handle(){
                return this.a+this.b;
            }
        },
        computed:{
            handleCom(){
                return this.a+this.b;
            }
        }
    })


</script>

如果handle()不加括號，

<p v-cloak>結果：{{handle()}}</p>

會在瀏覽器中打印  

function () { [native code] }

如果handleCom加括號，則會報錯

TypeError: handleCom is not a function"

區別二：

 

computed是 當下次所依賴的函數沒有發生改變時，再次調用時，會從緩存中讀取數據

 

methods是 沒有緩存存數據，每次調用每次執行，無論值有沒有改變

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            sum:"",
        },
        methods:{
            handle(){
                console.log("handle()被調用了")
                return this.a+this.b;
            }
        },
        computed:{
            handleCom(){
                console.log("handleCom被調用了")
                return this.a+this.b;
            }
        }
    })


</script>

handle（）只要光標移入console.log（）就會被執行

handleCom（）輸入框中值發生改變，才會執行