Vue3父子组件computed属性响应式失效问题求解

该交互失效问题和computed缓存机制无关，核心原因是硬编码传入的数组未经过Vue响应式处理：

• API传参场景下，接口返回结果被赋值给父组件data中声明的响应式变量list1，Vue会自动将返回的普通JS对象、数组转换为响应式代理，后续修改数组项的completed属性时，可正常触发computed重算与视图更新。
• 硬编码传参场景下，直接在模板prop位置传入数组字面量，该数组是普通JS对象，未被Vue响应式系统包裹，通过v-model修改数组项属性时，既不会触发computed重新计算，也不会触发视图重渲染，因此点击交互完全失效。

以下两种方案均可同时兼容API异步数据、硬编码本地数据场景，不会出现异步请求初始渲染异常问题：

方案1：父组件统一维护响应式数据源（推荐） #

将硬编码数组也声明在父组件data选项中，不要直接在模板prop属性内写数组字面量，所有传给子组件的数据源都经过父组件响应式初始化：
父组件修改示例：

<script>
import Todo from "./Todo.vue";
export default {
  data() {
    return {
      list1: [],
      // 硬编码数据也放入data，自动转换为响应式
      list2: [
        { id: '1111', title: 'a4', completed: true },
        { id: '2222', title: 'a5', completed: false },
        { id: '3333', title: 'a6', completed: false }
      ]
    }
  },
  mounted() {
    fetch("你的待办列表API接口")
      .then(response => response.json())
      .then(data => (this.list1 = data));
  }
}
</script>

<template>
  <div>
    <Todo title="AdminList" :initialAssignments="list1"></Todo>
    <Todo title="HomeList" :initialAssignments="list2"></Todo>
  </div>
</template>

该写法下，data中声明的数组初始值为空数组/预设硬编码内容，接口返回后更新响应式变量时Vue会自动触发重渲染，不存在初始渲染异常问题。

方案2：子组件内部将prop转换为本地响应式副本 #

如果需要子组件自行维护状态，可在子组件初始化时将传入的prop数据深拷贝为本地响应式变量，不要直接在computed中返回prop本身：
子组件修改示例：

<script>
export default {
  props: {
    title: String,
    initialAssignments: Array
  },
  data() {
    return {
      // 深拷贝传入的初始数据，生成本地响应式副本
      assignments: JSON.parse(JSON.stringify(this.initialAssignments))
    }
  },
  computed: {
    completedAssignments() {
      return this.assignments.filter(a => a.completed)
    },
    InProgressAssignments() {
      return this.assignments.filter(a => !a.completed)
    }
  },
  // 若需要同步父组件后续更新的prop数据，可添加监听器
  watch: {
    initialAssignments: {
      handler(newVal) {
        this.assignments = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    }
  }
}
</script>

该写法下，无论父组件传入的是普通字面量还是响应式数据，子组件都会将其转换为自身维护的响应式数据，交互可正常生效。

注意：原写法直接在computed中返回prop值，本质是直接操作prop原始数据，非响应式的字面量prop自然无法触发更新链路。

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