一个没必要用vue3响应式数据的情况

刚开始，我以为我遇到了什么诡异的事。

假设子组件是个list，展示一个数组的数据概览（展示name）；

父组件是个form，展示此数据的详细信息（包括name，age等）；

const aaa = ref([]);

aaa在父组件中定义，并将数据传给了子组件。

子组件点击具体某一项时向父组件返回了数组aaa中的一项。

然后父组件使用返回来的这一项回显并展示。

且，

可以修改回显的这一项数据。

此时，当修改父组件form中的name时，子组件list中的name竟然也跟着变了。明明没调接口更改aaa的值，他怎么会变？！真是见鬼了。

哎，其实是form绑定的model数据，在回显赋值时，就已经成为响应式数据aaa的其中一员了。

想要解决这个问题，当然是阻止form绑定的数据，变成数组aaa的一个数据项。

一是直接不把aaa设为响应式数据，反正它只是传给子组件展示用的，没有更改数据、同时需要及时更新页面的操作。

二是将回显的那一项数据的响应式去掉，在赋值时form的model数据 = toRaw(item)；

不需要响应式数据的话，可以用v-if在子组件或父组件显示数据，这样数据渲染的，必是加载完的。

我是这么做的，在子组件中将数据解构了

function handleClick(item) {
  emits('clickCard', { ...item });
}

可见响应式是多么好用，给它到处引用了好几次，仍然没有丢失其响应式，这就是响应式数组对它每一项成员的爱啊，这种行为好像父母在颠沛流离、风雨飘摇之中依然将自己的孩子护在羽翼之下。忽然有点感动。

也让人不禁思考，不要啥都定义成响应式，他有时候真没必要。