在Vue中，`ref`用于创建响应式的数据引用。对于基本数据类型（如字符串、数字等），`ref`可以直接实现响应式。而对于复杂数据类型（如对象或数组），需要使用`reactive`来创建响应式对象。
以下是如何使用`ref`和`reactive`来实现基本数据类型和复杂数据类型的响应式：
1. 对于基本数据类型：
```javascript
import { ref } from 'vue';
const count = ref(0); // 创建一个响应式的整数
count.value++; // 修改值时，视图会自动更新
```
2. 对于复杂数据类型（对象）：
```javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
items: []
}); // 创建一个响应式的对象
state.count++; // 修改对象的值时，视图会自动更新
state.items.push('item'); // 修改数组的值时，视图也会自动更新
```
3. 对于复杂数据类型（数组）：
```javascript
import { ref, reactive } from 'vue';
const numbers = ref([]); // 创建一个响应式的空数组
numbers.value.push(1); // 修改数组的值时，视图会自动更新
const state = reactive({
items: []
}); // 创建一个响应式的对象
state.items.push('item'); // 修改数组的值时，视图也会自动更新
```
注意：当使用`reactive`创建响应式对象时，对象内部的属性仍然是非响应式的。如果需要使对象的属性也具有响应性，可以使用嵌套的`reactive`调用。
