{首页主词},&

一、計算屬性傳參概述

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

二、計算屬性傳遞參數(shù)的方法

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


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

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


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

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

  return {
    firstName,
    lastName,
    fullName
  }
}

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

三、動態(tài)修改計算屬性參數(shù)

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


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監(jiān)聽fullName的變化，并在控制臺輸出其值。我們還定義了一個updateFirstName函數(shù)，在input框輸入新的firstName后觸發(fā)該函數(shù)來更新firstName的值。這樣，在firstName參數(shù)改變后，計算屬性fullName會被自動重新計算。

四、計算屬性傳遞多個參數(shù)

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


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
  }
}

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


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
  }
}

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

五、結(jié)語

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

Vue3計算屬性傳參用法介紹