Vue3 中的 $refs

注意，代码使用了Vue3 compositionApi 的setup语法糖书写。

<template>
  <div ref="box"></div>
</template>

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

const box = ref(null)

// 注意，这里如果不在挂载后输出到控制台，控制台是看不到dom元素的
onMounted(() => {
  console.log(box.value)
})
</script>

总结：

1.必须在onMounted挂载后才可以获取到dom

2.如果我们想要操作这个dom，可以将console.log(box.value)改为console.log(box)；

然后去控制台查看操作dom的属性和方法，