Vue3关于reactive数据未回显的问题

问题描述

这次项目使用vue3写的，发现用reactive包裹的对象，点击修改回显数据的时候表单数据并没有显示，但打印的表单绑定的数据却有值，一开始认为问题在页面先渲染了，数据才更新，但使用强制刷新并没用。最后知道原因，赋值的时候更改了对象的引用，解决办法

解决方法①

给form多加一层，这样不会因为回显赋值而导致form的引用的丢失

const form = reactive({
	value:{}
})

解决方法②

对象匹配赋值,确认如果对象属性太多双层for循环效率太低

for (let f_key in form){
	for(let o_key in obj){
		if(f_key === o_key){
			form[f_key] = obj[o_key]
		}
	}
}

解决方法③推荐

使用ref，这样赋值的使用直接form.value = obj即可，不会破坏其结果