簡單地用一個例子來舉例說明methods屬性和computed屬性的區別。
在html中：

<div id="app">
        <h1>Computed 計算屬性</h1>
        <button @click="a++">Add to A</button>
        <button @click="b++">add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <p>age + A = {{addToA()}}</p>
        <p>age + B = {{addToB()}}</p>
    </div>
 

在JS：

new Vue({
            el: "#app",
            data: {
                a: 0,
                b: 0,
                age: 20
            },
              methods: {
              addToA: function () {
                    console.log("Add to A");
                    return this.a + this.age;
                },
                addToB: function () {
                    console.log("Add to B");
                    return this.b + this.age;
                }
                }
 

在控制檯上打印出的結果是：

會發現還沒點選按鈕的時候，控制檯就會列印
Add to A 和 Add to B，然後點選Add to A，
會發現Add to B也會同時執行，也就是說，一旦
methods裡面任意一個方法被執行，其它方法也會同時
一起執行，也就很耗費效能。但是computed就不一樣

computed: {
                addToA: function () {
                    console.log("Add to A");
                    return this.a + this.age;
                },
                addToB: function () {
                    console.log("Add to B");
                    return this.b + this.age;
                }
            }
 

首先會報錯,TypeError: addToA is not a function
因為如果你想呼叫相對應的方法，必須要在methods裡面
呼叫方法，因為computed是計算屬性，那麼我們就不能
給addToA 和 addToB新增括號了,

<div id="app">
            <h1>Computed 計算屬性</h1>
            <button @click="a++">Add to A</button>
            <button @click="b++">add to B</button>
            <p>A - {{a}}</p>
            <p>B - {{b}}</p>
            <p>age + A = {{addToA}}</p>
            <p>age + B = {{addToB}}</p>
        </div>

現在分別在控制檯點選兩個按鈕
只會呼叫自身的函式，不會全部函式一起執行。在大量耗時和進行
搜尋的時候回用到計算屬性，並不是因為計算屬性是優化的，就不用
methods屬性了。