Vue3里computed和props该怎么配合用？看完这篇你就懂了

props和computed在Vue3里各自负责啥？

先把基础逻辑理透,才能明白“配合”的价值。

props 是Vue组件间“父传子”的通信桥梁，子组件用 defineProps 接收后，就能拿到父组件传递的数据，它的核心规则是 单向数据流 —— 子组件不能直接修改props的值（强行改会触发警告），若要修改需通过 emit 通知父组件处理。

computed（计算属性） 是为“基于已有响应式数据生成新数据”而生的工具，比如对数组做过滤、给多个变量做拼接，都适合用computed封装，它最关键的特性是 缓存：只要依赖的响应式数据没变化，多次访问computed结果会复用缓存，避免重复计算，提升性能。

为啥要把computed和props结合着用？

光懂概念不够,得看实际开发中“配合”能解决啥痛点，分享几个高频场景：

场景1：父传原始数据，子组件“加工后展示”

比如父组件传了一个商品列表 productList，子组件只需要展示“库存>0”的商品，这时用computed做过滤，代码长这样：

const availableProducts = computed(() => {
  return props.productList.filter(item => item.stock > 0)
})

之后只要父组件的 productList 变化（比如新增商品、修改库存），availableProducts 会自动重新计算，子组件模板里的展示也会同步更新，完全不用手动写“数据变化后重新过滤”的逻辑。

场景2：减少重复逻辑，让代码更简洁

如果子组件多个地方都要用到“加工后的props数据”，总不能每次都写一遍过滤/拼接逻辑吧？用computed封装后，所有需要的地方直接复用，后期维护时改一处就够，效率翻倍。

场景3：让组件职责更清晰

父组件专注“提供原始数据”（比如从接口拉取数据），子组件专注“数据处理+界面展示”，分工明确后，代码可读性、可维护性都会提升，团队协作时别人也能快速看懂“谁负责做什么”。

实际开发中怎么用computed处理props数据？

理论讲透了,手把手教你写代码，以“父组件传商品列表，子组件过滤出有库存的商品”为例：

步骤1：子组件用defineProps接收props

先定义要接收的props,明确类型和必要性：

const props = defineProps({
  productList: {
    type: Array,
    required: true // 父组件必须传这个数据
  }
})

步骤2：用computed加工props数据

导入 computed 函数，写处理逻辑：

import { computed } from 'vue'
const availableProducts = computed(() => {
  // 过滤出库存>0的商品
  return props.productList.filter(item => item.stock > 0)
})

这里必须强调：computed里不能直接改props的值！比如你想写 props.productList[0].stock = 0 这类代码，Vue会直接报错（违反单向数据流规则），如果业务需要修改数据，得通过 emit 通知父组件，由父组件来修改数据源。

步骤3：在模板里用computed的结果

加工后的数据可以直接在模板里循环、展示：

<template>
  <div 
    v-for="product in availableProducts" 
    :key="product.id"
  >
    {{ product.name }}（库存：{{ product.stock }}）
  </div>
</template>

computed处理props时容易踩的坑有哪些？

就算步骤都对,稍不注意也会掉坑里，这几个常见“雷区”得提前避开：

坑1：依赖没被正确跟踪，computed不更新

比如父组件传了个对象 userInfo，子组件用computed处理：

const userFullName = computed(() => {
  return `${props.userInfo.firstName} ${props.userInfo.lastName}`
})

如果父组件直接修改 userInfo 的属性（userInfo.firstName = '新名字'），按道理Vue的响应式应该能感知到？其实在Vue3里，只要父组件传递的是响应式数据（哪怕是普通对象，Vue也会自动处理为响应式），子组件的computed是能感知变化的。

真正的风险是：你在computed里用了非响应式数据，比如从 window 上拿了个变量，或者用了一个没被 ref/reactive 包裹的本地变量，这时候computed感知不到变化，自然不会更新。

坑2：直接在computed里修改props

前面反复提过单向数据流规则,但新手很容易犯这个错：为了“简化代码”，在computed里直接给props赋值：

const wrongComputed = computed(() => {
  props.productList[0].stock = 0 // 错误！直接改props
  return props.productList
})

这会触发Vue的警告,还会破坏单向数据流，正确做法是：子组件通过 emit 发事件，父组件收到后修改数据源。

坑3：误解computed的“缓存”机制

有人以为每次用computed结果都会重新计算,其实不是——只有依赖的响应式数据变化时，computed才会重新执行，比如父组件没更新 productList，你在子组件里多次打印 availableProducts.value，结果都是第一次计算的缓存值，这不是bug，是computed的性能优化特性，理解这点能避免“为啥数据没更新”的疑惑。

复杂场景下的最佳实践是啥？

实际项目里,场景不会永远是“过滤个数组”这么简单，分享两个进阶思路：

结合多个响应式数据源

比如子组件既要用props的 userInfo，又要结合本地的 theme（用 ref 存的主题）来计算显示内容：

const props = defineProps({
  userInfo: {
    type: Object,
    required: true
  }
})
const theme = ref('light') // 本地响应式数据
const displayName = computed(() => {
  // 暗黑模式下显示大写名字，亮色模式正常显示
  return theme.value === 'dark' 
    ? props.userInfo.name.toUpperCase() 
    : props.userInfo.name
})

这里computed同时依赖 props.userInfo 和 theme，任何一个变化，displayName 都会重新计算，Vue的响应式追踪会自动处理依赖关系。

处理多层嵌套的props数据

如果props传的是“对象里套对象，数组里套对象”的复杂结构，要注意父组件修改数据的方式，比如父组件传了个 reactive 包裹的数组 goodsList，子组件用computed做排序：

const sortedGoods = computed(() => {
  return [...props.goodsList].sort((a, b) => a.price - b.price)
})

父组件如果用 goodsList.push(newItem) 新增数据，子组件的 sortedGoods 会自动更新（因为数组的push是响应式变异方法）；但如果父组件直接替换整个数组（goodsList = newArray），只要新数组是响应式的，子组件也能感知到变化。

总结一下

把computed和props结合起来用,核心是让“数据传递”和“数据加工”各司其职：父组件负责给原始数据，子组件用computed做灵活处理，既保证响应式自动更新，又让代码逻辑更整洁。

记住这几个关键点：

• props是单向的,别直接改；
• computed靠依赖追踪自动更新,别漏了响应式数据源；
• 复杂场景下,结合多个响应式数据时，信任Vue的依赖追踪机制，但要注意数据修改的方式（比如对象/数组的响应式处理）。

实际项目里多写几个组件试试,比如做个带筛选的表格、可切换主题的用户卡片，慢慢就会掌握这种配合方式的精髓啦～