1. 計(jì)算屬性computed

• computed是基于它們的依賴項(xiàng)進(jìn)行緩存的。如果依賴項(xiàng)沒有發(fā)生變化，Vue.js 將返回緩存的結(jié)果，而不是重新計(jì)算。這可以大大提高性能，尤其是在處理復(fù)雜的計(jì)算時。
• computed是只讀的。一旦在模板中使用了計(jì)算屬性，就不應(yīng)該在組件中修改它的值。如果需要修改，可以將其轉(zhuǎn)換為一個方法。
• computed可以返回一個函數(shù)。這在需要在模板中使用函數(shù)式編程時很有用。例如，你可以使用 v-for 指令來循環(huán)執(zhí)行一個函數(shù)，并返回一組結(jié)果。
• computed不需要加小括號。computed可以向普通屬性一樣，直接使用，不需要額外加小括號調(diào)用。

Computed 的使用場景包括：

• 數(shù)據(jù)衍生：當(dāng)需要根據(jù)已有數(shù)據(jù)計(jì)算出新的數(shù)據(jù)時，可以使用計(jì)算屬性。例如，根據(jù)商品的價格和數(shù)量計(jì)算出總價。
• 數(shù)據(jù)過濾和轉(zhuǎn)換：當(dāng)需要對數(shù)據(jù)進(jìn)行過濾、格式化或轉(zhuǎn)換時，可以使用計(jì)算屬性。例如，將日期格式化為特定的顯示格式。

需要注意的是，計(jì)算屬性只會在依賴的數(shù)據(jù)發(fā)生變化時才重新計(jì)算，因此適用于那些相對穩(wěn)定的數(shù)據(jù)計(jì)算場景。

2. 普通屬性method

• method在每次調(diào)用時都會重新執(zhí)行。不生成緩存。
• method需要加小括號調(diào)用。method每次使用時，都需要加小括號調(diào)用。

Methods 的使用場景包括：

• 事件處理：當(dāng)需要處理用戶交互事件時，可以使用方法。例如，點(diǎn)擊按鈕時執(zhí)行特定的操作。
• 復(fù)雜邏輯：當(dāng)需要執(zhí)行復(fù)雜的業(yè)務(wù)邏輯，或者需要進(jìn)行條件判斷和循環(huán)操作時，可以使用方法。

需要注意的是，每次調(diào)用方法時，都會執(zhí)行其中的代碼，不會進(jìn)行緩存。因此，如果方法中包含復(fù)雜的計(jì)算邏輯或者涉及頻繁調(diào)用的場景，可能會對性能產(chǎn)生影響。

3. 應(yīng)用場景

3.1. computed

• 復(fù)雜的計(jì)算: 如果你需要在模板中執(zhí)行一個復(fù)雜的計(jì)算，并且這個計(jì)算涉及到多個響應(yīng)式屬性，那么使用計(jì)算屬性是最合適的。
• 過濾/格式化數(shù)據(jù): 計(jì)算屬性可以用于對數(shù)據(jù)進(jìn)行過濾或格式化，以便在模板中使用。
• 依賴于其他屬性: 如果一個屬性的值取決于其他屬性，并且需要在多個地方使用，那么使用計(jì)算屬性可以避免代碼冗余。

3.2. method

• 事件處理: method 通常用于處理用戶交互，例如點(diǎn)擊事件、表單提交等。在事件處理函數(shù)中，可以調(diào)用 method 來執(zhí)行相關(guān)的操作。
• 異步操作: method 也可以用于執(zhí)行異步操作。例如，在 method 中可以調(diào)用 API、進(jìn)行數(shù)據(jù)庫查詢等，并在操作完成后執(zhí)行某些操作。
• 需要在模板中執(zhí)行副作用: method 也可以用于執(zhí)行一些需要在模板中執(zhí)行的副作用操作。例如，在 method 中可以修改組件的狀態(tài)、觸發(fā)事件等。

總結(jié)：Computed 和 Methods 在 Vue 中有不同的用途和特點(diǎn)。Computed 適用于根據(jù)已有數(shù)據(jù)衍生新數(shù)據(jù)和數(shù)據(jù)過濾/轉(zhuǎn)換場景，并具有緩存機(jī)制優(yōu)化性能；Methods 適用于處理事件和復(fù)雜邏輯的場景。

4. 與偵聽器watch的對比

• watch可以用于觀察一個特定的值，并在值發(fā)生變化時執(zhí)行某些操作。
• watch不返回值，而是執(zhí)行副作用。在某些情況下，偵聽器可能更合適，尤其是需要在值發(fā)生變化時執(zhí)行異步操作時。

5. 示例

<template>
  <div>
    <!-- 使用 computed 屬性 -->
    <p>Reversed message: {{ reversedMessage }}</p>

    <!-- 使用 method -->
    <p>Uppercase message: {{ uppercaseMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  computed: {
    // Computed property
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    // Method
    uppercaseMessage() {
      return this.message.toUpperCase();
    }
  }
};
</script>

到此這篇關(guān)于vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)vue computed和method區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論