vue3 中ref函数作用

ref函数用于创建单个响应式数据。
在Vue 3的Composition API中，可以使用ref函数将一个普通的JavaScript值转换为具有响应式能力的对象。

以下是ref函数的使用示例：

import { ref } from 'vue';

// 创建一个普通的JavaScript值
const count = 0;

// 将值转换为具有响应式能力的对象
const reactiveCount = ref(count);

// 在模板或组件中使用响应式对象
console.log(reactiveCount.value); // 输出: 0

// 修改对象的值
reactiveCount.value += 1;

// 自动更新相关依赖
console.log(reactiveCount.value); // 输出: 1

在上述示例中，ref函数将普通的JavaScript值count转换为具有响应式能力的reactiveCount对象。通过访问reactiveCount.value来读取和修改值。当reactiveCount.value的值发生变化时，与之相关的视图会自动更新。

需要注意的是，在使用ref函数创建响应式数据时，访问和修改值需要通过.value属性。这是因为ref函数返回的是一个包装对象，.value是包装对象的一个属性，用于访问和修改实际的值。

此外，ref函数还提供了.value属性之外的其他方法，如.isRef、.unref等，用于操作和管理响应式数据。