Vue 程式札記 : methods 和 computed

在 Vue 中，methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別，並通過實際範例來幫助你理解。

methods 屬性

methods是定義在 Vue 元件中的函數，主要用於執行邏輯運算、事件處理等。methods可以直接定義為普通的 JavaScript 函數，並在 setup 函數中返回，使其在模板中可用。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">反轉消息</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue!');

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('');
    }

    return {
      message,
      reverseMessage
    };
  }
};
</script>

在這個範例中，我們定義了一個 reverseMessage 方法來反轉 message 的內容，並且在模板中通過點擊按鈕來觸發這個方法。

computed 屬性

Computed 是 Vue 中的用於定義計算屬性的選項，它們根據其他數據動態計算值。計算屬性基於它們的依賴進行緩存，只有當相關依賴發生變化時才會重新計算。

<template>
  <p>原價：{{ price }}</p>
  <p>折扣後價格：{{ discountedPrice }}</p>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const price = ref(100);
    const discount = ref(0.2);

    const discountedPrice = computed(() => {
      return price.value * (1 - discount.value);
    });

    return {
      price,
      discountedPrice,
    };
  },
};
</script>

在這個範例中，我們創建了一個 discountedPrice 的計算屬性，它根據 price 和 discount 的值動態計算折扣後的價格。

methods 與 computed 的區別

雖然 methods 和 computed 都可以用於處理數據，但它們之間存在一些關鍵差異：

• 計算緩存: Computed 屬性會根據它們的依賴進行緩存，只有當依賴發生變化時才會重新計算。而 Methods 每次調用時都會執行。

• 適用場景: Methods 適合用於執行事件處理或者不需要緩存的運算。Computed 屬性適合用於需要緩存的成本較高的計算。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡