Vue.js 中計算屬性的基礎知識：組合 API

計算屬性

讓我們考慮一個響應式物件：

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

在此物件中，我們要顯示指示作者是否已出版書籍的訊息：

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

我們根據author.books進行了計算。 範本中顯示的訊息取決於author.books的值。我們可以在模板中多次使用這個計算，但不想重複寫。因此，計算屬性應該用於涉及反應性資料的複雜邏輯。

使用計算屬性範例：

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

在這個範例中，我們定義了一個計算屬性，名為publishedBooksMessage。 Computed() 函數需要一個 getter 函數，回傳值是一個計算引用。您可以使用publishedBooksMessage.value 存取計算結果。但是，在範本中，計算參考會自動展開，因此您可以在不新增 .value 的情況下引用它們。

計算屬性追蹤它們的反應依賴性。 Vue 知道publishedBooksMessage 的計算取決於author.books 的值，當author.books 發生變化時，它會更新所有依賴publishedBooksMessage 的上下文。

計算緩存與方法

使用以下方法可以達到相同的結果：

<p>{{ calculateBooksMessage() }}</p>

在組件中：

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

您可以將相同的函數定義為方法，而不是計算屬性。兩種方法產生相同的結果。但是，我想強調計算屬性是被快取的。這意味著
只有當其反應性依賴項改變時，才會重新評估計算屬性。如果元件重新渲染時author.books的值沒有改變，它將傳回先前計算的結果，而不需要重新執行getter函數

為什麼需要快取？

考慮這樣一個場景，我們有一個昂貴的計算列表，需要循環遍歷一個大數組並執行許多計算。如果我們有其他依賴列表的計算屬性，在沒有快取的情況下，我們將比必要的更頻繁地運行列表的 getter！

最佳實踐

getter 應該沒有副作用。 計算的 getter 函數只執行純計算並避免副作用，這一點很重要。

例如，不要更改其他狀態、發出非同步請求或更改計算 getter 內的 DOM！將計算屬性視為從其他值派生值的一種方式 - 唯一的責任是計算並傳回該值。

結論

我們學習如何在 Vue.js 中使用反應式資料執行計算。為了確保應用程式的高效能，我們應該使用運算屬性來進行基於 Vue.js 中反應式資料的操作。

以上是Vue.js 中計算屬性的基礎知識：組合 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！