vue2.0/3.0 使用ref获取dom元素

vue2.0 用ref获取DOM元素的：

<template>
	<div class="box">
		<div ref="drag" class="box_drag">我会被拖动</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			console.log(this.$refs.drag)
		}
	}
</script>

vue3.0 用ref获取DOM元素：

由于vue3.0中没有this和$refs，则在vue2中使用$refs来获取dom元素的方法在vue3行不通

所以在vue3就可以使用以下方法：

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

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

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

    onMounted(() => {
      console.dir(myRef.value);
    });
    return {
      myRef
    };
  }
};
</script>

或者：

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    
    const myRef = ref(null)

    function test(){
        console.log(myRef)
    }   

    onMounted(()=>{
        console.log(myRef)  // 直接输出myRef

        test()  // 在onMounted中调用函数来输出myRef，效果一样
    })

    // 注：这里不用 return 了
</script>

当然，大家可以去vue官方文档了解更详细的内容：

Vue官方文档——ref