vue3 ref 和 reactive

在 Vue 3 中，`ref` 和 `reactive` 都是用于响应式数据的 API。

`ref` 将传入的基本数据类型或对象包装成响应式对象（即 Ref 对象），使得该数据变成响应式的，可以在模板中直接使用。在使用 `ref` 创建的响应式对象时，需要使用 `.value` 访问或修改它的值。

import { ref } from 'vue'

const count = ref(0) // count 是一个响应式对象，初始值为 0

console.log(count.value) // 输出 0

count.value++ // 修改 count 的值

console.log(count.value) // 输出 1

`reactive` 则将传入的对象转换成响应式对象，使得该对象的属性变成响应式的，可以在模板中直接使用。在使用 `reactive` 创建的响应式对象时，可以直接访问或修改它的属性。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello world'
}) // state 是一个响应式对象，初始值为 { count: 0, message: 'Hello world' }

console.log(state.count) // 输出 0

state.count++ // 修改 count 的值

console.log(state.count) // 输出 1

总的来说，`ref` 适用于包装基本数据类型或对象的单个属性，而 `reactive` 适用于包装整个对象。在实际开发中，应该根据具体需求选择使用哪种 API。