在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`调用。