methods 和 computed 比較

上篇 Vue3 起手式 文章中，提到了使用vue時一定會有data、method、mounted，methods是用來撰寫各種方式，通常會使用 v-on (@)渲染在HTML上。其實還有另一種很像的方法 computed。

methods & computed

在模板中要對資料計算或是轉換時，computed 與 method 往往能替我們做到同樣的事情。
範例:
methods

<div id="app">
    <P> {{ total() }} </p>
</div>

<script>
    var vm = Vue.createApp({
        data(){
            return{
            price: 100;
            quantity: 10;
            }
        },
        methods:{
            total: function(){
                this.price * this.quantity;
            }
        }
    }).mount("#app")
</script>

computed

<div id="app">
    <P> {{ total }} </p>
</div>

<script>
    var vm = Vue.createApp({
        data(){
            return{
            price: 100;
            quantity: 10;
            }
        },
       computed:{
            total: function(){
                return this.price * this.quantity;
            }
        }
    }).mount("#app")
</script>

上面兩種寫法都會得出一樣的結果，那我們要怎麼判斷神麼時候要使用哪個呢?
首先，我們要先認識一下兩著的差別。

methods 和 computed 不同

1. 撰寫上，computed 一定要使用return；methods不一定要。
2. computed不能攜帶參數；methods可以攜帶參數。
3. computed只有在依賴的資料改變時才會重新計算求值，儘管在模板中多次調用 computed、或是改變其他資料觸發畫面再重新渲染，只要 computed property 原始依賴響應的資料 沒有更動，就不會重新計算求值。
4. methods需要靠事件觸發渲染，只要有觸發就會重新計算求值，所以像前面的範例一定需要加上()。

methods裡面定義的函式，是需要主動呼叫的，而和watch和computed相關的函式，會自動呼叫,完成我們希望完成的作用