vue3如何使用this.$refs

在 Vue 3 中，`this.$refs` 是一个特殊的属性，它提供了一种直接访问组件实例中 DOM 元素的方式。当在模板中使用 `ref` 属性绑定一个元素时，Vue 会将这个引用存储在 `$refs` 对象中，让你可以在任何时候通过组件实例访问到那个元素。

以下是如何在 Vue 3 中使用 `this.$refs` 的基本步骤：

1. **定义 ref**: 在你的模板（`.vue` 文件的 template 部分）中，为需要引用的元素添加 `ref` 属性，例如 `<div ref="myRef"></div>`。

2. **获取引用**: 在组件的 `setup` 函数或 methods 中，你可以通过 `this.$refs` 访问到这个元素。例如：

export default {
  setup() {
    const myRef = ref(null); // 创建一个响应式的 ref 变量来保存引用

    onMounted(() => {
      // 当组件已挂载，你可以获取到 DOM 元素
      const domElement = this.$refs.myRef;
      if (domElement) {
        console.log('DOM element:', domElement);
      }
    });

    // 或者在事件处理器中使用
    function handleClick() {
      if (myRef.value) {
        myRef.value.style.backgroundColor = 'red';
      }
    }

    return {
      handleClick,
      myRef
    };
  }
}

3. **使用**: 在事件处理函数或生命周期钩子（如 `onMounted`、`onUpdated` 等）中，你可以直接操作 `this.$refs.myRef` 的属性或方法。

**相关问题--:**
1. Vue 3 中的 `ref` 是什么时候初始化的？
2. 如何在 Vue 3 的自定义事件中使用 `$refs`？
3. `$refs` 是否仅在组件挂载后可用？如果组件被卸载，还能保持引用吗？