【vue3】使用reactive定义对象或数组时的巨坑

vue3中，使用ref或者reactive定义数据

let ruleForm= reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})

如果要修改appId的值，就是：

ruleForm.appId = '123'

如果此时ruleForm里面的属性都有值了，此时又需要置空，如果一个个去操作的话，显得太过冗余，且此处我只写了三个数据，但实际开发时可能有更多个数据，此时我就想整体直接赋值

let defaultForm = reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})
ruleForm = defaultForm

但是会发现上述那样根本无法赋值

=============================================

原因是什么我不清楚，但是解决方法是：

以后在vue3中定义数据时，最好还是参考vue2data(){ return {}}的形式，一次性暴露

let Data = reactive({
	ruleForm: {
		appId: '',
		serviceId: '',
		creatorId: ''
	},
	str: '',
	arr: [],
	.......
})

let defaultForm = reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})

Data.ruleForm = defaultForm			// 这里赋值就成功了

// 数组也是一样
let defaultArr = [1, 2, 3]
Data.arr = defaultArr