vue3子组件页面不更新

写在前面

这是一次滑铁卢，整整找了半天时间...

项目结构

我有一个组件A，A中定义了一个属性data：Object，A中将data赋值给了一个reactive类型的对象R。页面中均使用R。

现象描述

当调用A的父组件P更新了A的data后，A的页面不更新

问题分析

P更新A后，A是一个新的对象，但R仍然引用旧对象，导致产生此问题。只有当data是引用类型时才会产生此问题。

解决方案

在A中使用computed对data进行包装,并赋值给R。