Vue组件同时支持静态与动态props的更优实现方案探讨

问题场景 #

我有一个接收props并执行计算后展示结果的CustomComponent，简化代码如下：

CustomComponent.vue #

<template>
  {{ calculated }}
</template>

<script setup>
const props = defineProps({
  value: Number,
})

const calculated = props.value // 实际场景逻辑更复杂
</script>

父组件App.vue有两种使用场景：

• 展示多个静态传值的独立组件实例
• 复用同一组件实例并绑定动态变化的props

App.vue #

<template>
  <!-- 静态传值实例 -->
  <custom-component :value="4"></custom-component>
  <custom-component :value="5"></custom-component>

  <!-- 动态绑定实例，value会在代码中动态修改 -->
  <custom-component :value="value"></custom-component>
</template>

<script setup>
import CustomComponent from './CustomComponent.vue'
import { ref } from 'vue'

const value = ref(null);
</script>

当前写法下，静态传值的实例能正常展示，但动态绑定的实例无法响应value的变化。虽然可以通过watch监听props实现需求，但不够优雅，寻求更优实现方式。

最优解决方案 #

1. 使用计算属性（Computed） #

这是Vue官方推荐的处理响应式依赖计算的最佳方式，自动追踪props的变化并重新计算结果，代码简洁且符合响应式原理：

修改CustomComponent.vue的<script setup>部分：

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

const props = defineProps({
  value: Number,
})

// 用computed包裹计算逻辑，自动响应props.value的变化
const calculated = computed(() => {
  // 这里替换为实际的复杂计算逻辑
  return props.value
})
</script>

2. 带副作用场景的处理（如异步操作） #

如果你的计算逻辑包含副作用（比如异步请求、修改DOM、调用外部API等），无法用纯计算属性实现，可以使用watchEffect替代手动watch，写法更简洁：

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

const props = defineProps({
  value: Number,
})

const calculated = ref(null)

// 自动追踪props.value的变化，触发回调
watchEffect(() => {
  // 执行带副作用的计算逻辑
  calculated.value = props.value // 替换为实际逻辑
})
</script>

原理说明 #

原写法中const calculated = props.value是一次性赋值，仅在组件初始化时执行一次，不会追踪props.value的后续变化。而计算属性会建立与props.value的响应式依赖关系，当依赖更新时自动重新计算并更新视图；watchEffect则会自动收集依赖，在依赖变化时触发回调执行逻辑。

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