Vue3 父子组件通信中 ref 数组监听失效的原因分析

在 Vue3 中，使用 ref 数组进行父子组件通信时可能会遇到监听失效的问题，这主要有以下几个原因：

主要原因

1. 响应式丢失问题：

   • 直接修改数组元素不会触发响应式更新（如 arrayRef.value[0] = newValue）
   • Vue3 的响应式系统无法追踪这种直接索引赋值操作

2. ref 数组的特殊性：

   • ref 创建的数组实际上是 Ref<Array> 类型
   • 需要访问 .value 属性才能获取到实际数组

3. 引用类型监听限制：

   • Vue 的响应式系统对引用类型的变化检测有一定限制
   • 深层变化可能不会被自动检测到

解决方案

1. 使用响应式操作方法

// 正确做法 - 使用响应式方法
const arrayRef = ref([]);

// 添加元素
arrayRef.value.push(newItem);

// 修改元素
arrayRef.value.splice(index, 1, newValue);

2. 使用 reactive 替代 ref 数组

const state = reactive({
  items: []
});

// 这样修改可以被监听到
state.items[0] = newValue;

3. 强制触发更新

import { triggerRef } from 'vue';

// 修改后手动触发更新
arrayRef.value = [...arrayRef.value];
// 或者
triggerRef(arrayRef);

4. 使用 watch 的深度监听

watch(
  arrayRef,
  (newVal) => {
    console.log('数组变化', newVal);
  },
  { deep: true }
);

最佳实践

1. 对于简单数组：使用 ref 配合响应式数组方法
2. 对于复杂状态：使用 reactive 管理对象包含的数组
3. 需要精确控制：使用 watch 配合 deep 选项或手动触发更新

理解 Vue3 响应式系统的这些特性，可以避免在父子组件通信时遇到 ref 数组监听失效的问题。