toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据,对象成为普通对象,并且值是关联的。
在这个过程中toRefs会做以下两件事:
把一个响应式对象转换成普通对象
对该普通对象的每个属性都做一次ref操作,这样每个属性都是响应式的
说明:
reactive 对象取出的所有属性值都是非响应式的,而利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性。
reactive的响应式功能是赋值给对象,如果展开对象,会让数丢失响应的能力
使用toRefs可以保证对象展开的每个属性都是响应式的
所以调用的时候要加上 .value
<el-form-item :label="item.value.itemName" v-for="item of formItemList" label-width="120px">
<el-input v-model="item.value.itemColumn" placeholder="请输入" v-if="item.value.itemType == '1'"/>
vue3父组件prop子组件的值是异步获取的(toRefs)
最新推荐文章于 2024-09-11 17:23:29 发布
本文解释了toRefs函数如何将响应式对象转换为普通对象,并确保其属性变为响应式。它强调了Reactive对象展开后失去响应的问题,以及如何通过.toValue确保属性的响应性在el-form-item中使用v-model时的应用。
摘要由CSDN通过智能技术生成