vue3中ref和reactive的使用

在Vue3中，ref和reactive都是用于创建响应式数据的函数。它们的使用有一些区别。

ref函数用于创建一个响应式的、可更改的ref对象。ref对象只有一个指向其内部值的属性.value。ref对象是可更改的，也就是说你可以为.value赋予新的值。所有对.value的操作都将被追踪，并且写操作会触发与之相关的副作用。ref函数适用于创建简单数据类型的响应式数据。例如：

const number = ref()
console.log(number.value) // 0
number.value = 1
console.log(number.value) // 1

reactive函数返回一个对象的响应式代理。通过reactive函数创建的对象的属性可以直接访问，无需使用.value。对这些属性的操作也会被追踪，并且写操作会触发相关的副作用。reactive函数适用于创建复杂数据类型的响应式数据。例如：

const people = reactive({name: '', age: ''})
console.log(people.name) // ''
console.log(people.age) // ''
people.name = 'tom'
people.age = 12
console.log(people.name) // 'tom'
console.log(people.age) // 12

总的来说，ref适合创建简单数据类型的响应式数据，而reactive适合创建复杂数据类型的响应式数据。根据实际情况选择使用哪一个函数。[1][2][3]