vue3 如何通过 ref 获取 DOM 节点

在 vue2 中，我们通过 ref 为节点添加一个名称，然后用 this.$refs['节点名称'] 就可以获取到DOM节点，

例：

<template>
  <div ref='one'>我是节点</div>   // 添加名称
</template>

<script>
  mounted() {
    console.log(this.$refs.one) // 获取到 one DOM 节点
  }
</script>

在 vue3 中，我们一样可以通过为节点添加一个 ref 名称 ，但是接下来的步骤和 vue2 有些区别

1.为节点添加一个 ref 名称
2.创建 ref 响应式常量并且与 DOM 节点名称一致 ，且值为 null
3.在 mounted 之后通过 常量的 value 即可获取到 DOM 节点

例：

<template>
    <div ref="two">我是节点</div>
</template>

<script>
  setup() {
      const two= ref(null)
        onMounted(() => {  // 需要在DOM加载完毕之后才可获取到
          console.log(two.value)
        })
      return { two }
 },
</script>

OK，今天就写这么多~！