Vue3.2 父子组件间 ref 数组监听问题分析

问题描述

在 Vue3.2 中，使用 watch 监听通过 props 传递的 tableData 数组时失效。

可能原因分析

1. 引用类型监听问题：props 传递的是数组引用，直接修改数组内容不会触发引用变化
2. watch 配置不当：可能需要配置 deep 或 immediate 选项
3. 响应式系统差异：Vue3 的响应式系统与 Vue2 有显著不同
4. ref 与 reactive 混用问题：如果同时使用了 ref 和 reactive 可能会有意外行为

解决方案

方案1：使用 deep 监听

watch(
  () => props.tableData,
  (newVal, oldVal) => {
    console.log('tableData changed', newVal)
  },
  { deep: true }
)

方案2：监听数组长度变化

watch(
  () => props.tableData.length,
  (newLen, oldLen) => {
    console.log('Array length changed', newLen)
  }
)

方案3：使用 toRefs 和 computed

import { toRefs, computed } from 'vue'

const { tableData } = toRefs(props)
const tableDataRef = computed(() => tableData.value)

watch(tableDataRef, (newVal) => {
  console.log('tableData changed', newVal)
}, { deep: true })

方案4：在父组件使用事件触发

// 子组件
const emit = defineEmits(['update-table'])

watch(
  () => props.tableData,
  () => {
    emit('update-table')
  },
  { deep: true }
)

// 父组件
<ChildComponent @update-table="handleTableUpdate" />

最佳实践建议

1. 明确数据所有权：确定数据应该由父组件还是子组件管理
2. 考虑使用 provide/inject：对于深层嵌套组件
3. 使用 Pinia/Vuex：对于复杂状态管理
4. 避免直接修改 props：遵循单向数据流原则

注意事项

• Vue3 的响应式系统对数组的监听与 Vue2 不同
• 使用 ref 包装数组时，需要通过 .value 访问
• 组合式 API 的响应式行为与选项式 API 有差异

希望这些解决方案能帮助你解决 watch 监听 props.tableData 失效的问题。