vue3ref和reactive区别

// 使用 Vue 3 的 ref 和 reactive 创建响应式数据

// 引入 Vue 3 的 Composition API
import { ref, reactive } from 'vue';

// 使用 ref 创建一个响应式的简单数据类型
const count = ref(0);
console.log(count.value); // 输出: 0

// 修改 ref 的值
count.value++;
console.log(count.value); // 输出: 1

// 使用 reactive 创建一个响应式的复杂数据类型（对象或数组）
const state = reactive({
  message: 'Hello Vue!',
  items: [1, 2, 3]
});

console.log(state.message); // 输出: Hello Vue!

// 修改 reactive 对象的属性
state.message = 'Hello World!';
state.items.push(4);

console.log(state.message); // 输出: Hello World!
console.log(state.items);   // 输出: [1, 2, 3, 4]

// 解释：
// - `ref` 用于创建基本类型的响应式数据，如数字、字符串、布尔值等。通过 `.value` 访问和修改其值。
// - `reactive` 用于创建复杂类型的响应式数据，如对象或数组。直接访问和修改其属性即可，无需使用 `.value`。