昨天提到的methods，跟他相似的computed是專門用來進行計算的屬性，我先從昨天methods的程式改寫

  <div id="app">
        <input type ="number" v-model ="price" placeholder="價格">
        <input type ="number" v-model ="quantity" placeholder="數量">
        價格: {{ price }}
        數量: {{ quantity }},
        <p>總金額: {{ total }} 元</p>
        <p>總金額: {{ total }} 元</p>
        <p>總金額: {{ total }} 元</p>
    </div>

        const count = Vue.createApp({
            data() {
                return {
                    price: 100,
                    quantity: 10
                }
            },
            computed: {
                total: function(){
                    return this.price * this.quantity
                }
            }
        }).mount('#app');

從這個程式來看，methods和computed的寫法非常相似，但當然是因為這個程式很簡單，有關methods和computed的區別我們從教材裡的方式來試試看，讓兩個不同的屬性在執行的時候都在console留下紀錄，現在的模板是這樣的

        <p>總金額: {{ totalCom }} 元</p>
        <p>總金額: {{ totalCom }} 元</p>
        <p>總金額: {{ totalCom }} 元</p>
        <p>總金額: {{ totalMeth() }} 元</p>
        <p>總金額: {{ totalMeth() }} 元</p>
        <p>總金額: {{ totalMeth() }} 元</p>

我讓它們分別執行3次，然後打開console會看到他們執行的紀錄是這樣的

從這個結果來看，methods執行了3次computed卻只執行了1次，這是因為computed執行之後會將結果保存，在屬性的值未產生變化的情況下它並不會再次執行。
所以如果是重複的計算，使用computed會比使用methods有更高的效能，但如果在function中需要帶入參數，使用methods是沒有辦法進行的，就只能選擇使用methods來執行了。

教材裡提供的更能理解的例子是幣值轉換器，一開始簡單的想如果我只想要轉換在台幣和日幣之間，用methods來設定一個兩個幣值之間轉換的工具，可以很簡單明瞭的解決。但如果我想要讓這個轉換器可以輸入的不同幣值增加比如美金、英鎊、港幣等，再使用methods的話就需要一直複製程式而且讓程式重複執行。這個時候如果運用computed有的set也就是回傳的話，可以將台幣作為基準，讓其他的幣值使用computed對台幣進行計算再回傳，也可以更方便以後再加入其他幣值的計算。

上面這個例子的實作因為時間問題所以會放在明天的進度進行嘗試，謝謝閱讀。