vue的方法和計算屬性的區別

首先看看 methods 方法

// html
<div id="vue">
    <button v-on:click = "a++">add to a</button>
    <button v-on:click = "b++">add to b</button>
    <p>a : {{a}}</p>
    <p>b : {{b}}</p>
    <p>age : {{age}}</p>

    <-- 使用methods方法 -->
    <p>age + a = {{addtoa()}}</p>
    <p>age + b = {{addtob()}}</p>
    <p>cc = {{cc()}}</p>
</div>

// js
new Vue({
    el : "#vue",

    data : {
        a : 0,
        b : 0,
        age : 20,
    },

    methods: {
        addtoa() {
            console.log("使用了addtoa 方法");
            return this.a + this.age;
        },
        addtob() {
            console.log("使用了addtob 方法");
            return this.b + this.age;
        },
        cc() {
            console.log('使用了 cc 方法');
            return 'cc';
        },
    },
})

瀏覽器打開查看控制台，顯示如下

接着點擊第一個按鈕 ‘ add to a ’，控制台顯示如下

點擊 ‘ add to a ’，只是讓 a 的值加 1，而其他值都沒有變化，但發現不是只有 與 a 值有關聯的 addtoa 方法執行，而是 methods 里的所有方法都執行了。接着再點擊 ‘ add to b ’，你也會發現所有方法都執行了

 

 再看看 computed 計算屬性

// html
<div id="vue">
    <button v-on:click = "a++">add to a</button>
    <button v-on:click = "b++">add to b</button>
    <p>a : {{a}}</p>
    <p>b : {{b}}</p>
    <p>age : {{age}}</p>

    <!-- 使用computed計算屬性,注意沒有括號 -->
    <p>age + a = {{addtoa}}</p>
    <!-- 注意這里又計算了一次 addtoa -->
    <p>age + a = {{addtoa}}</p>
    <p>age + b = {{addtob}}</p>
    <p>cc = {{cc}}</p>
</div>

// js
new Vue({
    el: "#vue",

    data: {
        a: 0,
        b: 0,
        age: 20,
    },

    computed : { 
        addtoa() {
            console.log("使用了addtoa 屬性")
            return this.a + this.age;
        },
        addtob() {
            console.log("使用了addtob 屬性")
            return this.b + this.age;
        },
        cc() {
            console.log('使用了 cc 屬性')
            return 'cc'
        },
    },
})

瀏覽器打開查看控制台，顯示如下

接着點擊第一個按鈕 ‘ add to a ’，控制台顯示如下

發現 html 中明明寫了兩次 addtoa 屬性，但是一開始只打印了一行 ‘ 使用了addtoa 屬性 ’，而且當改變 a 值后，只有與數據有關的屬性 即 addtoa 才重新計算了，而且同樣也是只打印一行 ‘ 使用了addtoa 屬性 ’

 

總結

兩個例子中函數被定義成 方法 或 屬性，就最終結果上來看其實都是一樣的

但是計算屬性是基於響應式依賴進行緩存的，只有數據發生變化時，才會重新計算，否則直接調用緩存

因此計算屬性 相比 methods 方法更加的節省性能

對於任何復雜的邏輯，都應該使用計算屬性