如何在Vue3中使用`ref`和`reactive`？

在Vue3中，`ref`和`reactive`是用来现数据响应式的API。它们可以用于定义响应式的数据。

1. 使用`ref`定义基本数据类型：

import { ref } from 'vue'

let num = ref(0) // 定义一个响应式的数字
let isShow = ref(false) // 定义一个响应式的布尔值

const onChange = () => {
  num.value++ // 在JavaScript中使用时，需要通过`.value`来访问和修改值
  isShow.value = true // 在JavaScript中使用时，需要通过`.value`来访问和修改值
}

2. 在Vue3模板中使用`ref`：

<a-modal v-model:visible="isShow"></a-modal>

在模板中使用`ref`时，Vue3会自动帮你加上`.value`后缀，所以不需要手动添加。

3. 使用`reactive`定义引用数据类型（例如对象）：

import { reactive } from 'vue'

let obj = reactive({ name: 'John', age: 20 }) // 定义一个响应式的对象

4. 使用`reactive`定义数组：

import { reactive } from 'vue'

let arr = reactive([1, 2, 3]) // 定义一个响应式的数组

注意：在Vue3中，`reactive`定义的数组也是响应式的，但是对于数组的操作，建议使用`ref`或`reactive`的替代方法，例如`toRef`、`toRefs`等。

总结：
- ``用于定义基本数据类型，需要通过`.value`来访问和修改值。
- `reactive`用于定义引用数据类型（例如对象和数组），可以直接访问和修改值。