Vue3 中 ref 和 reactive 的区别：响应式数据管理

在 Vue3 中，'ref' 和 'reactive' 是用于创建响应式数据的两个函数。

'ref' 函数用于创建一个包装对象，将基本类型数据包装成响应式数据。例如：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++ // 更新数据

console.log(count.value) // 1

在上面的例子中，我们使用 'ref' 函数将数字 0 包装成响应式数据 'count'。我们可以通过 'count.value' 来访问和修改数据。修改数据时，Vue 会自动触发更新。

'reactive' 函数用于创建一个响应式对象。例如：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})

console.log(state.count) // 0

state.count++ // 更新数据

console.log(state.count) // 1

在上面的例子中，我们使用 'reactive' 函数创建了一个响应式对象 'state'。我们可以直接访问和修改 'state' 对象的属性。修改属性时，Vue 会自动触发更新。

总结来说，'ref' 适用于包装基本类型数据，而 'reactive' 适用于包装对象类型数据。在使用时，需要根据具体的需求选择合适的函数。