Vue3中的`ref`和`reactive使用中遇到的一些坑

Vue3中的ref和reactive使用中遇到的一些坑

以下是一些常见的问题和解决方法：

1. 同时使用ref和reactive：在Vue3中，ref和reactive是两种不同的数据响应方式。ref用于包装基本类型数据，而reactive用于包装对象。如果在同一个变量上同时使用ref和reactive，可能会导致数据的不一致性和混乱。因此，应该根据变量的类型选择使用ref或reactive。

2. 使用ref的数据无法响应：ref返回的是一个包装过的对象，如果直接使用ref包装变量，那么对该变量的赋值将无法触发数据的响应。解决方法是使用.value来获取和设置ref包装的变量的值。

const count = ref(0); 
console.log(count.value);

3. 使用reactive的嵌套对象无法响应：当使用reactive包装嵌套对象时，内部的属性需要通过reactive包装才能触发响应。

const state1 = reactive({ person: { name: "John", age: 20 } });
// 需要改为
const state1 = reactive({ person: reactive({ name: "John", age: 20 }) });

4. 无法在已存在的对象上使用reactive：reactive只能用于初始化时创建新的响应式对象（经常出现的错误），无法直接将已存在的对象转换为响应式对象。如果需要将已存在的对象转换为响应式对象，可以使用toRefs函数。

const state = reactive(toRefs(existingObj));

5. 在模板中使用reactive的对象时无法自动解构：在Vue3中，模板中无法直接解构reactive的对象。解决方法是使用toRefs函数将对象转换为解构对象。

<div>{{ ...toRefs(state) }}</div>

6. 在setup中使用ref和reactive时，需要在返回对象中声明：在Vue3中，需要在setup函数中返回一个对象，该对象中声明的变量才能在模板中使用。如果在setup中使用了ref和reactive，但没有在返回对象中声明，那么这些变量将无法在模板中使用。

总结来说，要正确使用ref和reactive，需要根据变量的类型选择使用适合的方式。