在 Vue 3 中，ref 是一个新的响应式引用对象，用于包裹普通的 JavaScript 值，并将其转换为响应式的数据。ref 函数接受一个初始值作为参数，并返回一个包含响应式值的对象。当你更新 ref 的值时，相关的组件会自动重新渲染。

使用 ref 的步骤如下：

1. 导入 ref 函数：

import { ref } from 'vue';

2. 创建 ref 对象，并为其传入初始值：

const count = ref(0);

3. 在模板中使用 ref 的值，模板中的引用对象会自动解包，不需要使用 .value：

<template>
 <div>
 <p>{{ count }}</p>
  <button @click="count++">增加</button>
 </div>
</template>

另外，可以使用 toRef 和 toRefs 函数创建对其他响应式对象或 ref 对象的引用，以便在组合 API 中使用。

import { ref, reactive, toRef, toRefs } from 'vue';

const data = reactive({
 name: 'John',
 age: 25,
});
// 创建对 data.name 的引用
const nameRef = toRef(data, 'name'); 
// 创建对 data.age 的引用
const { age } = toRefs(data); 

console.log(nameRef.value); // 输出 'John'
console.log(age.value); // 输出 25

Vue 3 的 ref 函数为我们提供了一种简单的方法来创建响应式数据。它的使用非常简单和直观，通过 .value 来访问和修改值。