vue3的ref与reactive

Vue 3引入了新的响应式API，包括`ref`和`reactive`。

`ref`函数用于将普通的 JavaScript 数据转换为响应式数据。它接受一个初始值作为参数，并返回一个包装后的响应式对象。例如：

import { ref } from 'vue';

const count = ref(0);

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

count.value++; // 修改响应式数据的值

console.log(count.value); // 输出修改后的值

`ref`返回的是一个包含了一个`.value`属性的响应式对象。在读取和修改值时，需要使用`.value`属性。

而`reactive`函数则可用于将对象转换为响应式对象。它接受一个普通的 JavaScript 对象作为参数，并返回一个包装后的响应式对象。例如：

import { reactive } from 'vue';

const userInfo = reactive({
  name: 'John',
  age: 25,
});

console.log(userInfo.name); // 输出初始值 John

userInfo.name = 'Alice'; // 修改响应式对象的属性

console.log(userInfo.name); // 输出修改后的值 Alice

与 `ref` 不同，`reactive` 返回的是一个完整的响应式对象，可以直接读取和修改属性值。

这是Vue3中更灵活和直观的响应式数据 API，可以更方便地进行状态管理和数据绑定。