关于vue3中的reactive赋值问题

目录

• vue3 reactive赋值问题
• vue3 reactive的坑
• 清空数组
• 清空对象

vue3 reactive赋值问题

vue3中直接对reactive整个对象赋值检测不到

let obj = reactive({
	name: 'zhangsan',
	age: '18'
})
obj = {
	name: 'lisi'
	age: ''
}
// 上面这样赋值检测不到，因为响应式的是它的属性，而不是它自身
			
// 如需要对 reactive 赋值
// 方法1: 单个赋值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：多包一层
let obj = reactive({
	data: {
		name: 'zhangsan',
		age: '18'
	}
})
obj.data = {
	name: 'lisi'
	age: ''
}

vue3 reactive的坑

最近使用vue3的过程中发现reactive有一些问题

清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化

清空数组

// 错误示例

 

// 正确示例

 

清空对象

// 错误示例

 

// 错误示例

 

同样的道理直接赋值也不行，数组只能用数组的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引项没有作用，对象直接使用点语法即可，直接赋一个对象没有作用

这些问题其实只要使用ref就可以解决，但是人官方推荐使用reactive。。。。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。