vue3中 组合式api获取ref节点

在Vue3中，可以使用`ref`函数获取DOM节点或者组件实例，然后可以将它们作为响应式数据使用。

在组合式API中，可以使用`ref`函数将普通变量转换为响应式变量，也可以使用`ref`函数获取DOM节点或组件实例。

例如，我们可以在组件中使用`ref`函数获取DOM节点，并将其作为响应式数据使用：

<template>
  <div>
    <button ref="button" @click="handleClick">Click me</button>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const button = ref(null);

    const handleClick = () => {
      console.log(button.value);
    };

    onMounted(() => {
      console.log(button.value);
    });

    return {
      button,
      handleClick,
    };
  },
};
</script>

在上面的代码中，我们使用`ref`函数获取了按钮节点，并将其赋值给`button`变量。我们可以在`handleClick`函数中访问`button.value`来获取按钮节点。我们还使用了`onMounted`函数来在组件挂载时打印按钮节点。

需要注意的是，由于`ref`函数返回的是一个`ref`对象，所以在访问节点时需要使用`button.value`的方式来获取节点本身。