Vue3中的computed函數詳解：方便計算屬性的使用-Vue.js-PHP中文網

Vue3中的computed函數詳解：方便計算屬性的使用

WBOY

發布： 2023-06-18 20:31:40

原創

7555 人瀏覽過

Vue3中的computed函數詳解：方便計算屬性的使用

計算屬性是Vue中常用的一種方式，主要用於在模板中放置邏輯計算，方便開發者進行資料操作和展示。在Vue3中，計算屬性依然是非常重要的功能，而computed函數則更加的方便計算屬性的使用。本文將對Vue3中的computed函數進行詳細的介紹與講解。

什麼是computed函數

computed函數是Vue3中內建的函數，它主要用於建立一個計算屬性。透過使用computed函數，我們可以方便地創建一個計算屬性，使程式碼更為簡潔可讀。 computed函數在元件實例中函數式聲明，只要該計算屬性所依賴的響應式變數發生變化，它就會自動更新。

computed函數的基本用法

使用computed函數建立一個計算屬性，只需要在元件中宣告一個函數式屬性即可。下面是一個使用computed函數建立計算屬性的簡單範例程式碼：

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

登入後複製

在上面的範例程式碼中，我們定義了一個data屬性value來表示計算屬性的原始值。透過computed函數創建了兩個計算屬性，分別是multiplied和multipliedByTwo。其中multiplied依賴的是data屬性中的value變量，而multipliedByTwo則依賴multiplied。透過這樣的方式，我們可以方便地啟用計算屬性，並即時計算相關的數值。

computed函數的高階用法

computed函數還有一些進階的用法，可以更好地控制計算屬性的行為，以下將逐一介紹。

1. Getters和Setters

computed函數可以透過getters和setters控制計算屬性的讀取和更新。 getters是計算屬性的讀取函數，而setters是計算屬性的更新函數。預設情況下，計算屬性都是只讀不可更改的，但是透過setters函數，我們可以直接修改計算屬性的值，從而達到強制更新的目的。

下面是一個使用getters和setters的計算屬性實例程式碼：

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

登入後複製

在上面的範例程式碼中，我們宣告了一個計算屬性price，同時定義了它的getters和setters函數。 discountedPrice依賴price，當price改變時，discountedPrice也會自動更新。此外，我們也定義了一個方法applyDiscount，可以透過執行該方法直接修改計算屬性price，這樣就能實現計算屬性的強制更新了。

2. 計算屬性的快取

在Vue3中，計算屬性的快取預設是啟用的。這意味著，在計算屬性的依賴變數沒有改變的情況下，計算屬性會直接傳回上一次的結果，而不是重新計算。這樣就能節省運算時間和效能，提升程式碼的執行效率。

下面是一個計算屬性快取的範例程式碼：

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

登入後複製

在上面的範例程式碼中，我們宣告了一個計算屬性computedValue，用於計算count和multiplier的乘積。在mounted生命週期後，執行一次計算屬性，此時計算屬性的快取就會啟用。在updateCount方法中，我們透過更新count變數的值，觸發了computedValue的重新計算。此時在控制台中可以發現，計算屬性只有在值變化時才會重新計算。

如果不想啟用計算屬性的緩存，在計算函數中可以使用ref函數來實現。 ref函數會傳回一個響應式的對象，每次造訪該對象時都會重新計算計算函數。

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

登入後複製