Vue3 Option API修改响应式数组子属性后组件不更新求助

问题场景 #

在Vue3的Option API中定义响应式数组charts：

<script>
export default {
  data() {
    return {
      charts: [
        {
          id: 1,
          type: "pie",
          style: {
            width: "73.189%",
            height: "347.969px",
          },
          questions: 3,
          chart_data: [
            {
              order_id: 3,
              value: "HTC Vive Pro",
              count: 1,
            },
            {
              order_id: 3,
              value: "Oculus Go",
              count: 1,
            },
          ],
        },
        // 其他图表对象
      ]
    }
  }
}
</script>

在方法中直接替换嵌套数组引用：

this.charts[0].chart_data = [
  {
    order_id: 3,
    value: "jdezjkd",
    count: 8,
  },
  {
    order_id: 3,
    value: "loremjebd",
    count: 8,
  },
]

数据已更新，但组件未重新渲染。

原因 #

Vue3的Option API基于Proxy实现响应式，理论上能检测到嵌套属性的赋值，但在部分场景下（如深层嵌套对象的引用替换、组件渲染依赖未被正确追踪），可能出现响应式更新不触发重渲染的情况。本质是直接替换嵌套数组的引用时，若组件模板的依赖追踪未覆盖到该深层属性的引用变化，就会导致视图不更新。

解决方法 #

1. 使用this.$set强制触发响应式更新 #

通过this.$set显式告知Vue更新目标属性，确保响应式系统捕捉到变化：

this.$set(this.charts[0], 'chart_data', [
  { order_id: 3, value: "jdezjkd", count: 8 },
  { order_id: 3, value: "loremjebd", count: 8 }
])

2. 重新赋值根级数组 #

通过创建新数组的方式触发根级响应式更新，确保组件检测到变化：

this.charts = this.charts.map((item, idx) => {
  if (idx === 0) {
    return {
      ...item,
      chart_data: [
        { order_id: 3, value: "jdezjkd", count: 8 },
        { order_id: 3, value: "loremjebd", count: 8 }
      ]
    }
  }
  return item
})

3. 修改原数组内容而非替换引用 #

利用数组的可变方法（如splice、push）修改原数组，这类操作会被Vue的响应式系统自动检测：

// 清空原数组
this.charts[0].chart_data.splice(0)
// 添加新元素
this.charts[0].chart_data.push(
  { order_id: 3, value: "jdezjkd", count: 8 },
  { order_id: 3, value: "loremjebd", count: 8 }
)

特殊情况：第三方图表组件 #

如果chart_data用于渲染ECharts等第三方图表，即使Vue数据更新，也需要手动调用图表实例的setOption方法更新视图，因为这类组件直接操作DOM，不会自动响应Vue的响应式变化。

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