一、計算屬性傳參概述

計算屬性是vue中一種非常有用的數據處理方式，能夠根據自身的依賴動態計算出新值。在vue3中，計算屬性的用法相比于vue2有所變化，可以通過函數形式傳參來實現更靈活的數據處理。

二、計算屬性傳遞參數的方法

在vue2中，計算屬性的定義方式如下：

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在vue3中，我們可以使用一個函數來聲明計算屬性，并且可以在函數內傳遞參數：

setup() {
  const firstName = ref('Jane')
  const lastName = ref('Doe')

  const fullName = computed(() => {
    return firstName.value + ' ' + lastName.value
  })

  return {
    firstName,
    lastName,
    fullName
  }
}

以上代碼中，我們使用了函數式的方式定義了計算屬性fullName，并使用了firstName和lastName兩個ref數據作為fullName的參數，在函數內通過value來獲取這兩個參數的值。

三、動態修改計算屬性參數

在vue3中，我們可以通過watchEffect和watch來監聽計算屬性參數的變化，并在變化時重新計算計算屬性的值。下面是一個例子，我們通過input輸入框來動態修改firstName參數：

setup() {
  const firstName = ref('Jane')
  const lastName = ref('Doe')
  const inputRef = ref(null)

  const fullName = computed(() => {
    return firstName.value + ' ' + lastName.value
  })

  watchEffect(() => {
    console.log(fullName.value)
  })

  function updateFirstName() {
    firstName.value = inputRef.value.value
  }

  return {
    firstName,
    lastName,
    fullName,
    inputRef,
    updateFirstName
  }
}

以上代碼中，我們通過watchEffect監聽fullName的變化，并在控制臺輸出其值。我們還定義了一個updateFirstName函數，在input框輸入新的firstName后觸發該函數來更新firstName的值。這樣，在firstName參數改變后，計算屬性fullName會被自動重新計算。

四、計算屬性傳遞多個參數

在vue3中，我們可以通過使用對象或數組的形式來傳遞多個參數。以下是一個接收對象形式參數的計算屬性：

setup() {
  const firstName = ref('Jane')
  const lastName = ref('Doe')
  const info = ref({
    age: 25,
    gender: 'female'
  })

  const fullNameWithInfo = computed(() => {
    return firstName.value + ' ' + lastName.value + ', ' + info.value.age + ', ' + info.value.gender
  })

  return {
    firstName,
    lastName,
    info,
    fullNameWithInfo
  }
}

以下是一個接收數組形式參數的計算屬性：

setup() {
  const scores = ref([75, 80, 90])

  const totalScore = computed(() => {
    return scores.value.reduce((total, score) => total + score)
  })

  const averageScore = computed(() => {
    return totalScore.value / scores.value.length
  })

  return {
    scores,
    totalScore,
    averageScore
  }
}

以上代碼中，我們定義了一個接收對象參數的計算屬性fullNameWithInfo，其中參數info是一個ref對象；我們還定義了一個接收數組參數的計算屬性averageScore，其中參數scores是一個ref數組。

五、結語

通過本文的介紹，我們可以看到vue3中計算屬性傳參的一些常用方法，包括傳遞單個參數、動態修改參數、傳遞多個參數等。這些方法能夠讓我們更靈活地處理數據，并更好地實現組件的復用。