methods 和 computed 比較


Posted by hoyi-23 on 2021-07-25

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

methods & computed

在模板中要對資料計算或是轉換時,computedmethod 往往能替我們做到同樣的事情。
範例:
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 一定要使用returnmethods不一定要。
  2. computed不能攜帶參數;methods可以攜帶參數。
  3. computed只有在依賴的資料改變時才會重新計算求值,儘管在模板中多次調用 computed、或是改變其他資料觸發畫面再重新渲染,只要 computed property 原始依賴響應的資料 沒有更動,就不會重新計算求值。
  4. methods需要靠事件觸發渲染,只要有觸發就會重新計算求值,所以像前面的範例一定需要加上()

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


#methods #Computed







Related Posts

淺層複製及深層複製

淺層複製及深層複製

Day02 messenger、LINE、Telegram差異

Day02 messenger、LINE、Telegram差異

來學 React 吧之一_以 todo list 為例學會 React 基礎與 useState 介紹

來學 React 吧之一_以 todo list 為例學會 React 基礎與 useState 介紹


Comments