Vue3数组重新赋值问题

vue3中使用组合式式API时定义响应式数据需要使用reactive或者ref,两者使用时有些许不同,下面通过重新赋值数组来说明两者的不同

1. reactive

主要用来定义复杂一些的响应式数据

• 先清空再赋值

const datas = reactive([
	{
	id:1,
	name: '孙悟空'
	},
	{
	id:2,
	name: '猪八戒'
	}
])

function resetData(){
	datas.length=0
	datas.push({
	id:3,
	name:'李白'
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 修改结构直接赋值

const datas = reactive({ d:[
	{
	id:1,
	name: '孙悟空'
	},
	{
	id:2,
	name: '猪八戒'
	}
]})

function resetData(){
	datas.d = [{
	id:3,
	name:'李白'
	}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. ref

定义基本数据或简单对象响应式数据

const datas = ref([
	{
	id:1,
	name: '孙悟空'
	},
	{
	id:2,
	name: '猪八戒'
	}
])

function reset(){
	data.value = [{
	id:3,
	name:'李白'
	}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

总结

1. 使用reactive创建的响应式数据需要重新赋值时,需要先清空再赋值,
2. 修改数据结构直接赋值
3. 使用ref创建的响应式数据可以直接赋值