深入探索 Vue 3 中获取 DOM 节点的多种方法

在Vue 3中，获取DOM节点可以通过多种方式，以下是一些常用的方法：

1. 使用ref属性：

<template>
  <div ref="divRef">Hello, Vue 3!</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const divRef = ref(null);
 
    onMounted(() => {
      console.log(divRef.value); // DOM节点
    });
 
    return { divRef };
  }
};
</script>

2. 使用$el属性：

<template>
  <div>Hello, Vue 3!</div>
</template>
 
<script>
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      console.log(this.$el); // DOM节点
    });
  }
};
</script>

3. 使用querySelector或querySelectorAll：

<template>
  <div>Hello, Vue 3!</div>
</template>
 
<script>
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      const div = document.querySelector('div');
      console.log(div); // DOM节点
    });
  }
};
</script>

以上代码片段展示了在Vue 3组件中获取DOM节点的不同方法。在onMounted生命周期钩子中获取DOM节点，确保组件已经被挂载，并且DOM已经更新完成。使用ref是Vue推荐的方式，因为它是响应式的，并且能保证在组件的生命周期中节点可用。