Vue3计算属性传参用法介绍

一、计算属性传参概述

计算属性是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中计算属性传参的一些常用方法，包括传递单个参数、动态修改参数、传递多个参数等。这些方法能够让我们更灵活地处理数据，并更好地实现组件的复用。