Vue3获取DOM节点的3种方式实例

下面是Vue3获取DOM节点的3种方式实例的详细攻略：

1. 通过ref引用获取DOM节点

我们可以给DOM元素添加ref属性，然后在Vue模板中通过ref的值进行引用，从而获取DOM节点。具体操作步骤如下：

1. 在Vue模板中添加ref属性

<template>
  <div>
    <button ref="btn">点击我</button>
  </div>
</template>

1. 在Vue实例中引用DOM节点

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const btnRef = ref(null)

      onMounted(() => {
        console.log(btnRef.value) // 获取DOM节点
      })

      return {
        btnRef
      }
    }
  }
</script>

示例代码： 通过ref引用获取DOM节点的示例

在示例代码中，我们给button元素添加了一个ref属性，并命名为btn。然后在Vue组件的setup函数中通过ref函数来创建一个响应式的btnRef变量，并初始化为null，在onMounted钩子函数中，我们可以通过btnRef.value来获取到真正的DOM节点。

2. 通过$nextTick方法获取DOM节点

Vue3中提供了一个$nextTick方法，可以在DOM更新后执行回调函数，通过回调函数中的参数即可获取到更新后的DOM节点。具体操作步骤如下：

1. 在Vue模板中添加DOM元素

<template>
  <div>
    <span id="msg">Hello, Vue3!</span>
  </div>
</template>

1. 在Vue实例中调用$nextTick方法获取DOM节点

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const msgRef = ref(null)

      onMounted(() => {
        this.$nextTick(() => {
          console.log(msgRef.value) // 获取DOM节点
        })
      })

      return {
        msgRef
      }
    }
  }
</script>

示例代码： 通过$nextTick方法获取DOM节点的示例

在示例代码中，我们通过ref函数来创建一个msgRef变量，并在组件的setup函数中在onMounted钩子函数中调用$nextTick方法，在回调函数中可以通过msgRef.value来获取到DOM节点。

3. 通过$refs获取DOM节点

Vue3中提供了一个$refs属性，可以通过$refs来访问组件和DOM元素。具体操作步骤如下：

1. 在Vue模板中添加DOM元素

<template>
  <div>
    <input ref="input" type="text" />
  </div>
</template>

1. 在Vue实例中使用$refs获取DOM节点

<script>
  import { onMounted } from 'vue'

  export default {
    setup() {
      onMounted(() => {
        console.log(this.$refs.input) // 获取DOM节点
      })

      return {}
    }
  }
</script>

示例代码： 通过$refs获取DOM节点的示例

在示例代码中，我们给input元素添加了一个ref属性，并命名为input。然后在Vue组件实例中通过this.$refs.input即可获取到对应的DOM节点。

综上所述，以上是Vue3获取DOM节点的3种方式实例，希望对您有所帮助！