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

1. reactive

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

• 先清空再赋值

const datas = reactive([{id:1,name: '孙悟空'},{id:2,name: '猪八戒'}
])function resetData(){datas.length=0datas.push({id:3,name:'李白'})
}

• 修改结构直接赋值

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

2. ref

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

const datas = ref([{id:1,name: '孙悟空'},{id:2,name: '猪八戒'}
])function reset(){data.value = [{id:3,name:'李白'}]
}

总结

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