vue3 中ref和reactive区别

在 Vue3 中，`ref` 和 `reactive` 都是用来创建响应式数据的 API，但它们的使用场景略有不同。`ref` 适用于创建单个基本类型的响应式数据，例如数字、字符串等，而 `reactive` 则适用于创建复杂对象的响应式数据。

具体来说，通过 `ref` 创建的响应式数据可以直接访问其值，而需要通过 `value` 属性来访问或修改其值。而 `reactive` 创建的响应式数据则需要通过属性访问器来访问或修改其属性的值。

举个例子，我们可以通过以下代码来创建一个响应式的计数器：

import { ref, reactive } from 'vue'

// 使用 ref 创建响应式数据
const count = ref(0)

// 使用 reactive 创建响应式数据
const state = reactive({
  count: 0,
  message: 'Hello, World!'
})