vue3 通过 ref 获取 DOM

前言

vue3 和 vue2 使用起来还是有一定区别，下面就分别介绍下两者如何通过 ref 获取 DOM。

vue2 获取 DOM

在 template 中用 ref 标记

<p ref="myP">我是p标签</p>

js 中直接通过 this.$refs 即可获取 DOM

console.log(this.$refs.myP)

vue3 获取 DOM

在 template 中用 ref 标记

<p ref="myP">我是p标签</p>

ts 中借助 ref 来获取 DOM

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue';

  export default defineComponent({
    name: '',
    setup() {
      const myP = ref() // 必须同名
     
      onMounted(() => {
        console.log(myP.value) // 输出 DOM
      })
      
      return {
        myP
      }
    }
  })
</script>