刚开始,我以为我遇到了什么诡异的事。
假设子组件是个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 });
}
可见响应式是多么好用,给它到处引用了好几次,仍然没有丢失其响应式,这就是响应式数组对它每一项成员的爱啊,这种行为好像父母在颠沛流离、风雨飘摇之中依然将自己的孩子护在羽翼之下。忽然有点感动。
也让人不禁思考,不要啥都定义成响应式,他有时候真没必要。