vue3中定义数据，什么时候用ref什么时候用reactive

在Vue 3中，ref和reactive都可以用于定义数据，但它们的用途略有不同。

ref用于定义基本类型数据（如数字、字符串等），它会将基本类型的数据包装为一个响应式对象。这意味着在数据变化时，Vue会自动更新视图。例如：

import { ref } from 'vue';

const count = ref(0);

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

count.value++;

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

reactive用于定义复杂类型数据（如对象、数组等），它会将整个对象包装为一个响应式对象。这意味着在数据变化时，Vue会自动更新视图。例如：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello World'
});

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

state.count++;

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

需要注意的是，当使用ref时，需要通过`.value`来访问数据。而在使用reactive时，不需要额外的操作，直接访问对象属性即可。