vue3的ref和reactive

在 Vue 3 中，我们引入了两个新的响应式函数：`ref` 和 `reactive`。

`ref` 函数用于创建一个简单的响应式数据，它接受一个参数作为初始值，并返回一个包装过的对象。这个包装过的对象具有 `value` 属性，用于访问和修改值。当修改 `ref` 对象的 `value` 时，Vue 会自动追踪依赖，并在值发生变化时触发重新渲染。

示例：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出：0

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

`reactive` 函数用于创建一个响应式对象，它接受一个普通的 JavaScript 对象，并返回一个包装过的响应式代理对象。这个代理对象能够追踪对象属性的变化，并在变化时触发重新渲染。

示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello',
});
console.log(state.count); // 输出：0

state.count++; // 修改属性值
console.log(state.count); // 输出：1

总结来说，`ref` 适用于单个值的响应式数据，而 `reactive` 适用于复杂对象或数组的响应式数据。在使用这两个函数时，我们可以直接访问 `value` 属性获取或修改值。需要注意的是，当在模板中使用 `ref` 或 `reactive` 创建的响应式数据时，无需手动访问 `value`，Vue 会自动解包并进行响应式追踪。