Vue组合式API中能否向computed计算属性传入参数？

首先明确结论：computed()接收的getter匿名函数本身不支持手动传入参数。这个函数是由Vue的响应式系统自动调用的，调用时机和传入的参数完全由Vue内部控制，我们无法手动传递自定义参数。

你示例中的写法是computed的标准用法：getter函数直接访问当前组件上下文里的响应式变量（比如val1和val2），Vue会自动追踪这些变量作为依赖，当依赖发生变化时，自动重新执行getter计算新值。

如果需要实现类似“动态传参”的计算逻辑，可以通过以下两种方式实现：

1. 封装返回computed的工厂函数 #

把需要的参数作为工厂函数的入参，在函数内部创建computed并返回，这样就能根据不同参数生成对应的计算属性：

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

const baseNum = ref(100)

// 工厂函数接收参数，返回对应的计算属性
const createAdjustedNum = (discount) => {
  return computed(() => baseNum.value * (1 - discount))
}

// 传入不同参数生成不同计算属性
const numWith10Off = createAdjustedNum(0.1)
const numWith20Off = createAdjustedNum(0.2)
</script>

2. 将参数转为响应式依赖 #

如果参数是动态变化的，可以把它定义为响应式变量，在getter函数中访问这个变量，Vue会把它纳入依赖追踪，参数变化时自动重新计算：

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

const total = ref(500)
// 把需要动态调整的参数设为响应式变量
const taxRate = ref(0.08)

const afterTaxTotal = computed(() => {
  return total.value * (1 + taxRate.value)
})
</script>

从响应式原理角度看，computed的核心是依赖追踪与惰性求值：Vue会在首次执行getter时记录所有访问过的响应式依赖，后续只有当这些依赖变化时，才会重新执行getter。由于getter是Vue内部触发调用的，所以不存在手动传参的入口——getter能访问的只能是当前作用域内的响应式变量，这也是Vue响应式系统的设计逻辑。

内容的提问来源于stack exchange，提问作者knightwatch