vue3 使用dom中的ref

在 Vue 3 中，`ref` 是一种响应式数据绑定机制，它创建了一个对象，该对象可以作为 DOM 元素的引用，同时也可以存储任意值，并自动更新视图。你可以将 `ref` 看作是一个包装了 JavaScript 变量的特殊属性，当你修改这个变量时，Vue 会自动跟踪并重新渲染对应的元素。

使用 `ref` 的步骤通常如下：

1. 定义一个 `ref`：

const myInputRef = ref(null);

这里 `null` 初始设置是为了表示还没有找到DOM元素。

2. 将 `ref` 用于模板中，关联到实际的DOM元素：

<input v-model="myInputRef.value">

`v-model` 指令会监听 `myInputRef` 的值变化，并同步到输入框。

3. 获取或修改 `ref` 对象的值：

// 获取DOM元素
const inputElement = myInputRef.value;

// 修改值
myInputRef.value = '新的值';

`ref` 提供了一种方便的方式来操作DOM，尤其是当需要处理复杂的交互或者组件间的共享状态时。