vue3中reactive和ref如何使用和区别

在Vue3中，reactive和ref都是响应式API。它们都可以用于创建响应式数据和观察其变化。

区别：

ref函数需要传入一个初始值，并返回一个对象，该对象有一个value属性，可以直接读取和赋值。而reactive函数可以传入一个普通对象，并生成一个响应式对象，该对象可以直接读取和修改属性。

示例：

import { reactive, ref } from 'vue'

// ref示例
const count = ref(0)
console.log(count.value) // 0
count.value++ // 直接对value属性进行赋值
console.log(count.value) // 1

// reactive示例
const state = reactive({
  count: 0,
  name: 'John'
})
console.log(state.count) // 0
state.count++ // 直接对属性进行赋值
console.log(state.count) // 1

ref函数适用于简单类型变量，比如数字、字符串等。而reactive函数适用于复杂类型变量，比如对象和数组。

示例：

import { reactive, ref } from 'vue'

// ref示例
const age = ref(18)
const name = ref('John')
console.log(age.value, name.value) // 18 John
age.value++ // 直接对value属性进行赋值
name.value = 'Mary'
console.log(age.value, name.value) // 19 Mary

// reactive示例
const state = reactive({
  name: 'John',
  info: {
    age: 18,
    sex: '男'
  }
})
console.log(state.info.age, state.info.sex) // 18 男
state.info.age++ // 直接对属性进行赋值
state.name = 'Mary'
console.log(state.info.age, state.name) // 19 Mary

综上所述，ref和reactive在使用上有所区别，适用于不同的场景。ref适用于简单类型变量，而reactive适用于复杂类型变量。