vue3 tsx ref dom获取方式

在 Vue 3 中使用 TypeScript 和 TSX（TypeScript 的 JSX 语法）时，获取 DOM 元素的方式与普通的 Vue 组件略有不同。Vue 提供了 ref 和 reactive 等响应式 API 来帮助我们处理组件的状态，而当我们需要直接访问 DOM 节点时，我们可以使用 ref。

下面是一个简单的例子，展示如何在 Vue 3 + TSX 中使用 ref 来获取 DOM 元素：

import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup() {
    // 创建一个 ref 对象来持有对 DOM 元素的引用
    const myElementRef = ref<HTMLElement | null>(null);

    // 在组件挂载后执行的操作
    onMounted(() => {
      if (myElementRef.value) {
        // 这里可以操作DOM元素
        console.log(myElementRef.value);
      }
    });

    return () => (
      <div>
        {/* 将 ref 分配给 DOM 元素 */}
        <input ref={(el: HTMLElement | null) => (myElementRef.value = el)} />
      </div>
    );
  },
});

在这个例子中，我们做了以下几件事情：

1. 使用 ref 创建了一个响应式的容器 myElementRef，它将用于保存对 DOM 元素的引用。
2. 在 onMounted 生命周期钩子中，检查 myElementRef.value 是否存在，如果存在则可以对其进行操作。
3. 在返回的渲染函数中，我们将 ref 属性分配给了一个 <input> 元素，并且提供了一个回调函数，这个回调会在组件更新或重新渲染时被调用，用来更新 myElementRef 的值为当前的 DOM 元素或 null。

请注意，当你使用 ref 获取 DOM 元素时，应该确保在尝试访问 myElementRef.value 之前，元素已经被挂载到 DOM 上。这就是为什么我们在 onMounted 钩子中进行 DOM 操作的原因。此外，在类型定义中，考虑到元素可能尚未挂载或者已经卸载，我们应该允许 null 作为 myElementRef 的值。