Angular父子组件数组变更检测失效问题求助

1. 子组件props接收方式导致响应性丢失 #

如果是Vue3项目，直接解构props对象会丢失响应性：

// 错误写法：解构后properties变为非响应式变量
const { properties } = defineProps(['properties'])

正确做法是使用toRef或toRefs保留响应性：

import { toRef } from 'vue'
const props = defineProps(['properties'])
const properties = toRef(props, 'properties')

// 或者用toRefs
import { toRefs } from 'vue'
const props = defineProps(['properties'])
const { properties } = toRefs(props)

如果是Vue2项目，确保子组件正确声明props，且没有在子组件内直接修改props（这本身也违反Vue单向数据流规则）。

2. 父组件数组更新逻辑存在问题 #

确认你是否真的生成了全新的数组引用：

• 正确的更新方式（以删除操作为例）：

async deleteProperty(id) {
  await api.deleteProperty(id)
  // 通过filter生成新数组，直接替换原数组
  this.properties = this.properties.filter(p => p.id !== id)
}

• 避免无效操作：比如先通过splice修改原数组再扩展生成新数组，这种操作不仅多余，若中间逻辑出错还会导致更新失败。另外检查异步接口调用后的上下文是否正确，比如是否因使用普通函数导致this指向错误，无法正确赋值组件的properties。

3. 子组件DOM复用导致视觉上未更新 #

子组件的v-for如果使用index作为key，删除元素时Vue会复用现有DOM节点，导致视觉上看似数组未更新：

<!-- 错误写法 -->
<div v-for="(item, index) in properties" :key="index">{{ item.name }}</div>

改为使用数组元素的唯一标识作为key：

<!-- 正确写法 -->
<div v-for="item in properties" :key="item.id">{{ item.name }}</div>

4. 响应式依赖未被正确追踪 #

• 如果子组件中通过watch监听properties，确保监听的是正确的响应式变量：

// Vue3示例
watch(() => props.properties, (newVal) => {
  // 处理更新逻辑
}, { immediate: true })

• 如果是Vue2，确保watch配置正确（数组引用变化不需要deep: true，但如果监听数组内部元素变化则需要）。

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